@aurelia-mdc-web/all 9.2.3-au2 → 9.3.0-au2

package/dist/snackbar/mdc-snackbar.js

@@ -0,0 +1,141 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement, inject, bindable } from 'aurelia';
+import { MdcComponent, booleanAttr, number } from '../base';
+import { MDCSnackbarFoundation, util, strings } from '@material/snackbar';
+import template from './mdc-snackbar.html?raw';
+strings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();
+strings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();
+strings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();
+strings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();
+let MdcSnackbar = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-snackbar', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _actions_decorators;
+    let _actions_initializers = [];
+    let _actions_extraInitializers = [];
+    let _dismissible_decorators;
+    let _dismissible_initializers = [];
+    let _dismissible_extraInitializers = [];
+    let _stacked_decorators;
+    let _stacked_initializers = [];
+    let _stacked_extraInitializers = [];
+    let _timeout_decorators;
+    let _timeout_initializers = [];
+    let _timeout_extraInitializers = [];
+    let _closeOnEscape_decorators;
+    let _closeOnEscape_initializers = [];
+    let _closeOnEscape_extraInitializers = [];
+    let _classes_decorators;
+    let _classes_initializers = [];
+    let _classes_extraInitializers = [];
+    let _actionClasses_decorators;
+    let _actionClasses_initializers = [];
+    let _actionClasses_extraInitializers = [];
+    let _dismissClasses_decorators;
+    let _dismissClasses_initializers = [];
+    let _dismissClasses_extraInitializers = [];
+    let _leading_decorators;
+    let _leading_initializers = [];
+    let _leading_extraInitializers = [];
+    var MdcSnackbar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [bindable()];
+            _actions_decorators = [bindable()];
+            _dismissible_decorators = [bindable({ set: booleanAttr })];
+            _stacked_decorators = [bindable({ set: booleanAttr })];
+            _timeout_decorators = [bindable({ set: number })];
+            _closeOnEscape_decorators = [bindable({ set: booleanAttr })];
+            _classes_decorators = [bindable()];
+            _actionClasses_decorators = [bindable()];
+            _dismissClasses_decorators = [bindable()];
+            _leading_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _actions_decorators, { kind: "field", name: "actions", static: false, private: false, access: { has: obj => "actions" in obj, get: obj => obj.actions, set: (obj, value) => { obj.actions = value; } }, metadata: _metadata }, _actions_initializers, _actions_extraInitializers);
+            __esDecorate(null, null, _dismissible_decorators, { kind: "field", name: "dismissible", static: false, private: false, access: { has: obj => "dismissible" in obj, get: obj => obj.dismissible, set: (obj, value) => { obj.dismissible = value; } }, metadata: _metadata }, _dismissible_initializers, _dismissible_extraInitializers);
+            __esDecorate(null, null, _stacked_decorators, { kind: "field", name: "stacked", static: false, private: false, access: { has: obj => "stacked" in obj, get: obj => obj.stacked, set: (obj, value) => { obj.stacked = value; } }, metadata: _metadata }, _stacked_initializers, _stacked_extraInitializers);
+            __esDecorate(null, null, _timeout_decorators, { kind: "field", name: "timeout", static: false, private: false, access: { has: obj => "timeout" in obj, get: obj => obj.timeout, set: (obj, value) => { obj.timeout = value; } }, metadata: _metadata }, _timeout_initializers, _timeout_extraInitializers);
+            __esDecorate(null, null, _closeOnEscape_decorators, { kind: "field", name: "closeOnEscape", static: false, private: false, access: { has: obj => "closeOnEscape" in obj, get: obj => obj.closeOnEscape, set: (obj, value) => { obj.closeOnEscape = value; } }, metadata: _metadata }, _closeOnEscape_initializers, _closeOnEscape_extraInitializers);
+            __esDecorate(null, null, _classes_decorators, { kind: "field", name: "classes", static: false, private: false, access: { has: obj => "classes" in obj, get: obj => obj.classes, set: (obj, value) => { obj.classes = value; } }, metadata: _metadata }, _classes_initializers, _classes_extraInitializers);
+            __esDecorate(null, null, _actionClasses_decorators, { kind: "field", name: "actionClasses", static: false, private: false, access: { has: obj => "actionClasses" in obj, get: obj => obj.actionClasses, set: (obj, value) => { obj.actionClasses = value; } }, metadata: _metadata }, _actionClasses_initializers, _actionClasses_extraInitializers);
+            __esDecorate(null, null, _dismissClasses_decorators, { kind: "field", name: "dismissClasses", static: false, private: false, access: { has: obj => "dismissClasses" in obj, get: obj => obj.dismissClasses, set: (obj, value) => { obj.dismissClasses = value; } }, metadata: _metadata }, _dismissClasses_initializers, _dismissClasses_extraInitializers);
+            __esDecorate(null, null, _leading_decorators, { kind: "field", name: "leading", static: false, private: false, access: { has: obj => "leading" in obj, get: obj => obj.leading, set: (obj, value) => { obj.leading = value; } }, metadata: _metadata }, _leading_initializers, _leading_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcSnackbar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        labelEl_; // assigned in html
+        label = __runInitializers(this, _label_initializers, void 0);
+        actions = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _actions_initializers, void 0));
+        dismissible = (__runInitializers(this, _actions_extraInitializers), __runInitializers(this, _dismissible_initializers, void 0));
+        stacked = (__runInitializers(this, _dismissible_extraInitializers), __runInitializers(this, _stacked_initializers, void 0));
+        timeout = (__runInitializers(this, _stacked_extraInitializers), __runInitializers(this, _timeout_initializers, void 0));
+        timeoutChanged() {
+            if (this.timeout !== undefined && !isNaN(this.timeout)) {
+                this.foundation?.setTimeoutMs(this.timeout);
+            }
+        }
+        closeOnEscape = (__runInitializers(this, _timeout_extraInitializers), __runInitializers(this, _closeOnEscape_initializers, true));
+        closeOnEscapeChanged() {
+            this.foundation?.setCloseOnEscape(this.closeOnEscape);
+        }
+        classes = (__runInitializers(this, _closeOnEscape_extraInitializers), __runInitializers(this, _classes_initializers, void 0));
+        actionClasses = (__runInitializers(this, _classes_extraInitializers), __runInitializers(this, _actionClasses_initializers, void 0));
+        dismissClasses = (__runInitializers(this, _actionClasses_extraInitializers), __runInitializers(this, _dismissClasses_initializers, void 0));
+        leading = (__runInitializers(this, _dismissClasses_extraInitializers), __runInitializers(this, _leading_initializers, void 0));
+        initialSyncWithDOM() {
+            this.timeoutChanged();
+            this.closeOnEscapeChanged();
+        }
+        getDefaultFoundation() {
+            // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+            // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+            const adapter = {
+                addClass: (className) => this.root.classList.add(className),
+                announce: () => util.announce(this.labelEl_),
+                notifyClosed: (reason) => this.emit(strings.CLOSED_EVENT, reason ? { reason } : {}),
+                notifyClosing: (reason) => this.emit(strings.CLOSING_EVENT, reason ? { reason } : {}),
+                notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
+                notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
+                removeClass: (className) => this.root.classList.remove(className),
+            };
+            return new MDCSnackbarFoundation(adapter);
+        }
+        open() {
+            this.foundation?.open();
+        }
+        /**
+         * @param reason Why the snackbar was closed. Value will be passed to CLOSING_EVENT and CLOSED_EVENT via the
+         *     `event.detail.reason` property. Standard values are REASON_ACTION and REASON_DISMISS, but custom
+         *     client-specific values may also be used if desired.
+         */
+        close(reason = '') {
+            this.foundation?.close(reason);
+        }
+        handleAction(action) {
+            this.foundation?.close(action);
+        }
+        handleDismiss() {
+            this.close(strings.REASON_DISMISS);
+        }
+        handleKeyDown(evt) {
+            this.foundation?.handleKeyDown(evt);
+            return true;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _leading_extraInitializers);
+        }
+    };
+    return MdcSnackbar = _classThis;
+})();
+export { MdcSnackbar };
+//# sourceMappingURL=mdc-snackbar.js.map

package/dist/snackbar/mdc-snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-snackbar.js","sourceRoot":"","sources":["../../src/snackbar/mdc-snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, inject, bindable } from 'aurelia';\nimport { MdcComponent, booleanAttr, number } from '../base';\nimport { MDCSnackbarFoundation, MDCSnackbarAdapter, util, MDCSnackbarCloseEventDetail, strings } from '@material/snackbar';\nimport template from './mdc-snackbar.html?raw';\n\nstrings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();\nstrings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();\nstrings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();\nstrings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();\n\n@inject(Element)\n@customElement({ name: 'mdc-snackbar', template })\nexport class MdcSnackbar extends MdcComponent<MDCSnackbarFoundation> {\n\n  private labelEl_!: Element; // assigned in html\n\n  @bindable()\n  label: string;\n\n  @bindable()\n  actions: string[];\n\n  @bindable({ set: booleanAttr })\n  dismissible: boolean;\n\n  @bindable({ set: booleanAttr })\n  stacked: boolean;\n\n  @bindable({ set: number })\n  timeout?: number;\n  timeoutChanged() {\n    if (this.timeout !== undefined && !isNaN(this.timeout)) {\n      this.foundation?.setTimeoutMs(this.timeout);\n    }\n  }\n\n  @bindable({ set: booleanAttr })\n  closeOnEscape: boolean = true;\n  closeOnEscapeChanged() {\n    this.foundation?.setCloseOnEscape(this.closeOnEscape);\n  }\n\n  @bindable()\n  classes: string;\n\n  @bindable()\n  actionClasses: string;\n\n  @bindable()\n  dismissClasses: string;\n\n  @bindable({ set: booleanAttr })\n  leading: boolean;\n\n  initialSyncWithDOM() {\n    this.timeoutChanged();\n    this.closeOnEscapeChanged();\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCSnackbarAdapter = {\n      addClass: (className) => this.root.classList.add(className),\n      announce: () => util.announce(this.labelEl_),\n      notifyClosed: (reason) => this.emit<MDCSnackbarCloseEventDetail>(strings.CLOSED_EVENT, reason ? { reason } : {}),\n      notifyClosing: (reason) => this.emit<MDCSnackbarCloseEventDetail>(strings.CLOSING_EVENT, reason ? { reason } : {}),\n      notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),\n      notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),\n      removeClass: (className) => this.root.classList.remove(className),\n    };\n    return new MDCSnackbarFoundation(adapter);\n  }\n\n  open() {\n    this.foundation?.open();\n  }\n\n  /**\n   * @param reason Why the snackbar was closed. Value will be passed to CLOSING_EVENT and CLOSED_EVENT via the\n   *     `event.detail.reason` property. Standard values are REASON_ACTION and REASON_DISMISS, but custom\n   *     client-specific values may also be used if desired.\n   */\n  close(reason = '') {\n    this.foundation?.close(reason);\n  }\n\n  handleAction(action: string) {\n    this.foundation?.close(action);\n  }\n\n  handleDismiss() {\n    this.close(strings.REASON_DISMISS);\n  }\n\n  handleKeyDown(evt: KeyboardEvent) {\n    this.foundation?.handleKeyDown(evt);\n    return true;\n  }\n}\n\n/** @hidden */\nexport interface IMdcSnackbarElement extends HTMLElement {\n  $au: {\n    'au:resource:custom-element': {\n      viewModel: MdcSnackbar;\n    };\n  };\n}\n"]}

package/dist/switch/enhance-mdc-switch.js

@@ -0,0 +1,24 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { templateCompilerHooks } from 'aurelia';
+let EnhanceMdcSwitch = (() => {
+    let _classDecorators = [templateCompilerHooks];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var EnhanceMdcSwitch = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            EnhanceMdcSwitch = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        compiling(template) {
+            template.innerHTML = template.innerHTML.replaceAll('mdc-switch=""', 'as-element="mdc-switch" mdc-switch-element');
+        }
+    };
+    return EnhanceMdcSwitch = _classThis;
+})();
+export { EnhanceMdcSwitch };
+//# sourceMappingURL=enhance-mdc-switch.js.map

package/dist/switch/enhance-mdc-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhance-mdc-switch.js","sourceRoot":"","sources":["../../src/switch/enhance-mdc-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;IAGnC,gBAAgB;4BAD5B,qBAAqB;;;;;;;;YACtB,6KAIC;;;YAJY,uDAAgB;;QAC3B,SAAS,CAAC,QAA2C;YACnD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,eAAe,EAAC,4CAA4C,CAAC,CAAC;QACnH,CAAC;;;;SAHU,gBAAgB","sourcesContent":["import { templateCompilerHooks } from 'aurelia';\n\n@templateCompilerHooks\nexport class EnhanceMdcSwitch {\n  compiling(template: HTMLElement | HTMLTemplateElement) {\n    template.innerHTML = template.innerHTML.replaceAll('mdc-switch=\"\"','as-element=\"mdc-switch\" mdc-switch-element');\n  }\n}\n"]}

package/dist/switch/mdc-switch.html

@@ -0,0 +1,21 @@
+<template class="mdc-switch ${selected ? 'mdc-switch--selected' : ''} ${disabled ? 'mdc-switch--disabled' : ''}"
+  type="button" role="switch" aria-checked="${selected ? 'true' : 'false'}"
+  mdc-ripple="no-class.bind: true; unbounded.bind: true; surface.bind: rippleElement" click.trigger="handleClick()">
+  <div class="mdc-switch__track"></div>
+  <div class="mdc-switch__handle-track">
+    <div class="mdc-switch__handle">
+      <div class="mdc-switch__shadow">
+        <div class="mdc-elevation-overlay"></div>
+      </div>
+      <div class="mdc-switch__ripple" ref="rippleElement"></div>
+      <div class="mdc-switch__icons">
+        <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
+          <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
+        </svg>
+        <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
+          <path d="M20 13H4v-2h16v2z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/switch/mdc-switch.js

@@ -0,0 +1,85 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { MdcComponent } from '../base';
+import { MDCSwitchRenderFoundation } from '@material/switch';
+import { inject, customElement, CustomElement } from 'aurelia';
+import template from './mdc-switch.html?raw';
+let switchId = 0;
+let MdcSwitch = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-switch', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    var MdcSwitch = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcSwitch = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        root;
+        constructor(root) {
+            super(root);
+            this.root = root;
+            defineMdcSwitchElementApis(this.root);
+            this.root.id = `mdc-switch-${++switchId}`;
+        }
+        disabled;
+        selected;
+        processing;
+        initialSyncWithDOM() {
+            if (this.selected) {
+                this.root.classList.add('mdc-switch--selected');
+                this.root.setAttribute('aria-checked', 'true');
+            }
+            this.foundation?.initFromDOM();
+        }
+        getDefaultFoundation() {
+            return new MDCSwitchRenderFoundation(this.createAdapter());
+        }
+        createAdapter() {
+            return {
+                addClass: className => {
+                    this.root.classList.add(className);
+                },
+                hasClass: className => this.root.classList.contains(className),
+                isDisabled: () => this.root.disabled,
+                removeClass: className => {
+                    this.root.classList.remove(className);
+                },
+                setAriaChecked: ariaChecked => this.root.setAttribute('aria-checked', ariaChecked),
+                setDisabled: disabled => {
+                    this.root.disabled = disabled;
+                },
+                state: this,
+            };
+        }
+        handleClick() {
+            this.foundation?.handleClick();
+            this.emit('change', {}, true);
+        }
+    };
+    return MdcSwitch = _classThis;
+})();
+export { MdcSwitch };
+function defineMdcSwitchElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'MDC-SWITCH';
+            }
+        },
+        selected: {
+            get() {
+                return CustomElement.for(this).viewModel.selected;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.selected = value;
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=mdc-switch.js.map

package/dist/switch/mdc-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-switch.js","sourceRoot":"","sources":["../../src/switch/mdc-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAA0C,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE/D,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,IAAI,QAAQ,GAAG,CAAC,CAAC;IAIJ,SAAS;4BAFrB,MAAM,CAAC,OAAO,CAAC,EACf,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;;;;sBACjB,YAAY;yBAApB,SAAQ,WAAuC;;;;YAAtE,6KA8CC;;;YA9CY,uDAAS;;QACD,IAAI;QAAvB,YAAmB,IAAuB;YACxC,KAAK,CAAC,IAAI,CAAC,CAAC;YADK,SAAI,GAAJ,IAAI,CAAmB;YAExC,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,cAAc,EAAE,QAAQ,EAAE,CAAC;QAC5C,CAAC;QAED,QAAQ,CAAU;QAClB,QAAQ,CAAU;QAClB,UAAU,CAAU;QAEpB,kBAAkB;YAChB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gBAChD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;YACjD,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;QACjC,CAAC;QAED,oBAAoB;YAClB,OAAO,IAAI,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC7D,CAAC;QAES,aAAa;YACrB,OAAO;gBACL,QAAQ,EAAE,SAAS,CAAC,EAAE;oBACpB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACrC,CAAC;gBACD,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAC9D,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACpC,WAAW,EAAE,SAAS,CAAC,EAAE;oBACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBACxC,CAAC;gBACD,cAAc,EAAE,WAAW,CAAC,EAAE,CAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC;gBACrD,WAAW,EAAE,QAAQ,CAAC,EAAE;oBACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBAChC,CAAC;gBACD,KAAK,EAAE,IAAI;aACZ,CAAC;QACJ,CAAC;QAED,WAAW;YACT,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;QAChC,CAAC;;;;SA7CU,SAAS;AA0DtB,SAAS,0BAA0B,CAAC,OAAoB;IACtD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC/B,OAAO,EAAE;YACP,GAAG;gBACD,OAAO,YAAY,CAAC;YACtB,CAAC;SACF;QACD,QAAQ,EAAE;YACR,GAAG;gBACD,OAAO,aAAa,CAAC,GAAG,CAAY,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;YAC/D,CAAC;YACD,GAAG,CAA0B,KAAc;gBACzC,aAAa,CAAC,GAAG,CAAY,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;YAChE,CAAC;YACD,YAAY,EAAE,IAAI;SACnB;KACF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { MdcComponent } from '../base';\nimport { MDCSwitchState, MDCSwitchRenderAdapter, MDCSwitchRenderFoundation } from '@material/switch';\nimport { inject, customElement, CustomElement } from 'aurelia';\nimport { MDCRippleCapableSurface } from '@material/ripple';\nimport template from './mdc-switch.html?raw';\n\nlet switchId = 0;\n\n@inject(Element)\n@customElement({ name: 'mdc-switch', template })\nexport class MdcSwitch extends MdcComponent<MDCSwitchRenderFoundation> implements MDCSwitchState, MDCRippleCapableSurface {\n  constructor(public root: IMdcSwitchElement) {\n    super(root);\n    defineMdcSwitchElementApis(this.root);\n    this.root.id = `mdc-switch-${++switchId}`;\n  }\n\n  disabled: boolean;\n  selected: boolean;\n  processing: boolean;\n\n  initialSyncWithDOM() {\n    if (this.selected) {\n      this.root.classList.add('mdc-switch--selected');\n      this.root.setAttribute('aria-checked', 'true');\n    }\n    this.foundation?.initFromDOM();\n  }\n\n  getDefaultFoundation() {\n    return new MDCSwitchRenderFoundation(this.createAdapter());\n  }\n\n  protected createAdapter(): MDCSwitchRenderAdapter {\n    return {\n      addClass: className => {\n        this.root.classList.add(className);\n      },\n      hasClass: className => this.root.classList.contains(className),\n      isDisabled: () => this.root.disabled,\n      removeClass: className => {\n        this.root.classList.remove(className);\n      },\n      setAriaChecked: ariaChecked =>\n        this.root.setAttribute('aria-checked', ariaChecked),\n      setDisabled: disabled => {\n        this.root.disabled = disabled;\n      },\n      state: this,\n    };\n  }\n\n  handleClick() {\n    this.foundation?.handleClick();\n    this.emit('change', {}, true);\n  }\n}\n\n/** @hidden */\nexport interface IMdcSwitchElement extends HTMLButtonElement {\n  selected: boolean;\n  $au: {\n    'au:resource:custom-element': {\n      viewModel: MdcSwitch;\n    };\n  };\n}\n\nfunction defineMdcSwitchElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    tagName: {\n      get() {\n        return 'MDC-SWITCH';\n      }\n    },\n    selected: {\n      get(this: IMdcSwitchElement) {\n        return CustomElement.for<MdcSwitch>(this).viewModel.selected;\n      },\n      set(this: IMdcSwitchElement, value: boolean) {\n        CustomElement.for<MdcSwitch>(this).viewModel.selected = value;\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/tab-bar/indicator/mdc-tab-indicator.html

@@ -0,0 +1,9 @@
+<template class="
+    mdc-tab-indicator
+    ${fade ? 'mdc-tab-indicator--fade' : ''}
+    ${active ? 'mdc-tab-indicator--active' : ''}
+  ">
+  <span
+    class="mdc-tab-indicator__content mdc-tab-indicator__content--${icon ? 'icon' : 'underline'} ${icon ? 'material-icons' : ''}"
+    aria-hidden="true" element.ref="content"><span if.bind="icon">${icon}</span></span>
+</template>

package/dist/tab-bar/indicator/mdc-tab-indicator.js

@@ -0,0 +1,72 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTabIndicatorFoundation, MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-indicator.html?raw';
+let MdcTabIndicator = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-tab-indicator', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _fade_decorators;
+    let _fade_initializers = [];
+    let _fade_extraInitializers = [];
+    let _active_decorators;
+    let _active_initializers = [];
+    let _active_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    var MdcTabIndicator = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _fade_decorators = [bindable({ set: booleanAttr })];
+            _active_decorators = [bindable({ set: booleanAttr })];
+            _icon_decorators = [bindable()];
+            __esDecorate(null, null, _fade_decorators, { kind: "field", name: "fade", static: false, private: false, access: { has: obj => "fade" in obj, get: obj => obj.fade, set: (obj, value) => { obj.fade = value; } }, metadata: _metadata }, _fade_initializers, _fade_extraInitializers);
+            __esDecorate(null, null, _active_decorators, { kind: "field", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
+            __esDecorate(null, null, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcTabIndicator = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        content; // assigned in html
+        fade = __runInitializers(this, _fade_initializers, void 0);
+        active = (__runInitializers(this, _fade_extraInitializers), __runInitializers(this, _active_initializers, void 0));
+        icon = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
+        computeContentClientRect() {
+            return this.foundation.computeContentClientRect();
+        }
+        getDefaultFoundation() {
+            // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+            // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+            const adapter = {
+                addClass: (className) => this.root.classList.add(className),
+                removeClass: (className) => this.root.classList.remove(className),
+                computeContentClientRect: () => this.content.getBoundingClientRect(),
+                setContentStyleProperty: (prop, value) => this.content.style.setProperty(prop, value),
+            };
+            if (this.root.classList.contains(MDCTabIndicatorFoundation.cssClasses.FADE)) {
+                return new MDCFadingTabIndicatorFoundation(adapter);
+            }
+            // Default to the sliding indicator
+            return new MDCSlidingTabIndicatorFoundation(adapter);
+        }
+        activate(previousIndicatorClientRect) {
+            this.foundation?.activate(previousIndicatorClientRect);
+        }
+        deactivate() {
+            this.foundation?.deactivate();
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _icon_extraInitializers);
+        }
+    };
+    return MdcTabIndicator = _classThis;
+})();
+export { MdcTabIndicator };
+//# sourceMappingURL=mdc-tab-indicator.js.map

package/dist/tab-bar/indicator/mdc-tab-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-tab-indicator.js","sourceRoot":"","sources":["../../../src/tab-bar/indicator/mdc-tab-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAA0B,+BAA+B,EAAE,gCAAgC,EAAE,MAAM,yBAAyB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,QAAQ,MAAM,8BAA8B,CAAC;IAIvC,eAAe;4BAF3B,MAAM,CAAC,OAAO,CAAC,EACf,aAAa,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC;;;;sBAClB,YAAY;;;;;;;;;;+BAApB,SAAQ,WAAuC;;;;gCAGzE,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;kCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;gCAG9B,QAAQ,EAAE;YALX,8JAAA,IAAI,6BAAJ,IAAI,mFAAU;YAGd,oKAAA,MAAM,6BAAN,MAAM,uFAAU;YAGhB,8JAAA,IAAI,6BAAJ,IAAI,mFAAS;YAVf,6KA2CC;;;YA3CY,uDAAe;;QAClB,OAAO,CAAc,CAAC,mBAAmB;QAGjD,IAAI,uDAAU;QAGd,MAAM,6GAAU;QAGhB,IAAI,6GAAS;QAEb,wBAAwB;YACtB,OAAO,IAAI,CAAC,UAAW,CAAC,wBAAwB,EAAE,CAAC;QACrD,CAAC;QAED,oBAAoB;YAClB,sGAAsG;YACtG,yGAAyG;YACzG,MAAM,OAAO,GAA2B;gBACtC,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;gBAC3D,WAAW,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC;gBACjE,wBAAwB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE;gBACpE,uBAAuB,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC;aACtF,CAAC;YAEF,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAC9B,yBAAyB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7C,OAAO,IAAI,+BAA+B,CAAC,OAAO,CAAC,CAAC;YACtD,CAAC;YAED,mCAAmC;YACnC,OAAO,IAAI,gCAAgC,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC;QAED,QAAQ,CAAC,2BAAwC;YAC/C,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,2BAA2B,CAAC,CAAC;QACzD,CAAC;QAED,UAAU;YACR,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC;QAChC,CAAC;;;;;;;;SAzCU,eAAe","sourcesContent":["import { MdcComponent, booleanAttr } from '../../base';\nimport { MDCTabIndicatorFoundation, MDCTabIndicatorAdapter, MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';\nimport { inject, customElement, bindable } from 'aurelia';\nimport template from './mdc-tab-indicator.html?raw';\n\n@inject(Element)\n@customElement({ name: 'mdc-tab-indicator', template })\nexport class MdcTabIndicator extends MdcComponent<MDCTabIndicatorFoundation> {\n  private content: HTMLElement; // assigned in html\n\n  @bindable({ set: booleanAttr })\n  fade: boolean;\n\n  @bindable({ set: booleanAttr })\n  active: boolean;\n\n  @bindable()\n  icon: string;\n\n  computeContentClientRect(): ClientRect {\n    return this.foundation!.computeContentClientRect();\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCTabIndicatorAdapter = {\n      addClass: (className) => this.root.classList.add(className),\n      removeClass: (className) => this.root.classList.remove(className),\n      computeContentClientRect: () => this.content.getBoundingClientRect(),\n      setContentStyleProperty: (prop, value) => this.content.style.setProperty(prop, value),\n    };\n\n    if (this.root.classList.contains(\n      MDCTabIndicatorFoundation.cssClasses.FADE)) {\n      return new MDCFadingTabIndicatorFoundation(adapter);\n    }\n\n    // Default to the sliding indicator\n    return new MDCSlidingTabIndicatorFoundation(adapter);\n  }\n\n  activate(previousIndicatorClientRect?: ClientRect) {\n    this.foundation?.activate(previousIndicatorClientRect);\n  }\n\n  deactivate() {\n    this.foundation?.deactivate();\n  }\n\n}\n"]}

package/dist/tab-bar/mdc-tab-bar.html

@@ -0,0 +1,6 @@
+<template class="mdc-tab-bar" role="tablist" keydown.trigger="handleKeyDown_($event)"
+  mdctab:interacted.trigger="handleTabInteraction_($event)">
+  <div as-element="mdc-tab-scroller" component.ref="tabScroller_" align.bind="align">
+    <au-slot></au-slot>
+  </div>
+</template>

package/dist/tab-bar/mdc-tab-bar.js

@@ -0,0 +1,137 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCTabBarFoundation, strings } from '@material/tab-bar';
+import { MDCTabFoundation } from '@material/tab';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-bar.html?raw';
+// aurelia is case insensitive
+MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
+strings.TAB_ACTIVATED_EVENT = strings.TAB_ACTIVATED_EVENT.toLowerCase();
+let MdcTabBar = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-tab-bar', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _focusOnActivate_decorators;
+    let _focusOnActivate_initializers = [];
+    let _focusOnActivate_extraInitializers = [];
+    let _useAutomaticActivation_decorators;
+    let _useAutomaticActivation_initializers = [];
+    let _useAutomaticActivation_extraInitializers = [];
+    let _align_decorators;
+    let _align_initializers = [];
+    let _align_extraInitializers = [];
+    var MdcTabBar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _focusOnActivate_decorators = [bindable({ set: booleanAttr })];
+            _useAutomaticActivation_decorators = [bindable({ set: booleanAttr })];
+            _align_decorators = [bindable()];
+            __esDecorate(null, null, _focusOnActivate_decorators, { kind: "field", name: "focusOnActivate", static: false, private: false, access: { has: obj => "focusOnActivate" in obj, get: obj => obj.focusOnActivate, set: (obj, value) => { obj.focusOnActivate = value; } }, metadata: _metadata }, _focusOnActivate_initializers, _focusOnActivate_extraInitializers);
+            __esDecorate(null, null, _useAutomaticActivation_decorators, { kind: "field", name: "useAutomaticActivation", static: false, private: false, access: { has: obj => "useAutomaticActivation" in obj, get: obj => obj.useAutomaticActivation, set: (obj, value) => { obj.useAutomaticActivation = value; } }, metadata: _metadata }, _useAutomaticActivation_initializers, _useAutomaticActivation_extraInitializers);
+            __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcTabBar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        tabScroller_; // assigned in html
+        focusOnActivate = __runInitializers(this, _focusOnActivate_initializers, void 0);
+        focusOnActivateChanged() {
+            this.tabScroller_?.tabs.forEach((tab) => tab.focusOnActivate = this.focusOnActivate);
+        }
+        useAutomaticActivation = (__runInitializers(this, _focusOnActivate_extraInitializers), __runInitializers(this, _useAutomaticActivation_initializers, void 0));
+        useAutomaticActivationChanged() {
+            this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);
+        }
+        align = (__runInitializers(this, _useAutomaticActivation_extraInitializers), __runInitializers(this, _align_initializers, void 0));
+        initialSyncWithDOM() {
+            this.focusOnActivateChanged();
+            this.useAutomaticActivationChanged();
+            for (let i = 0; i < this.tabScroller_.tabs.length; i++) {
+                if (this.tabScroller_.tabs[i].active) {
+                    this.scrollIntoView(i);
+                    break;
+                }
+            }
+        }
+        handleKeyDown_(evt) {
+            this.foundation?.handleKeyDown(evt);
+            return true;
+        }
+        handleTabInteraction_(evt) {
+            this.foundation?.handleTabInteraction(evt);
+        }
+        getDefaultFoundation() {
+            // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+            // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+            const adapter = {
+                scrollTo: (scrollX) => this.tabScroller_.scrollTo(scrollX),
+                incrementScroll: (scrollXIncrement) => this.tabScroller_.incrementScroll(scrollXIncrement),
+                getScrollPosition: () => this.tabScroller_.getScrollPosition(),
+                getScrollContentWidth: () => this.tabScroller_.getScrollContentWidth(),
+                getOffsetWidth: () => this.root.offsetWidth,
+                isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',
+                setActiveTab: (index) => this.foundation?.activateTab(index),
+                activateTabAtIndex: (index, clientRect) => this.tabScroller_.tabs[index].activate(clientRect),
+                deactivateTabAtIndex: (index) => this.tabScroller_.tabs[index].deactivate(),
+                focusTabAtIndex: (index) => this.tabScroller_.tabs[index].focus(),
+                getTabIndicatorClientRectAtIndex: (index) => this.tabScroller_.tabs[index].computeIndicatorClientRect(),
+                getTabDimensionsAtIndex: (index) => this.tabScroller_.tabs[index].computeDimensions(),
+                getPreviousActiveTabIndex: () => {
+                    for (let i = 0; i < this.tabScroller_.tabs.length; i++) {
+                        if (this.tabScroller_.tabs[i].isActive()) {
+                            return i;
+                        }
+                    }
+                    return -1;
+                },
+                getFocusedTabIndex: () => {
+                    const tabElements = this.getTabElements_();
+                    const activeElement = document.activeElement;
+                    return tabElements.indexOf(activeElement);
+                },
+                getIndexOfTabById: (id) => {
+                    for (let i = 0; i < this.tabScroller_.tabs.length; i++) {
+                        if (this.tabScroller_.tabs[i].id === id) {
+                            return i;
+                        }
+                    }
+                    return -1;
+                },
+                getTabListLength: () => this.tabScroller_.tabs.length,
+                notifyTabActivated: (index) => this.emit(strings.TAB_ACTIVATED_EVENT, { index }, true),
+            };
+            return new MDCTabBarFoundation(adapter);
+        }
+        /**
+         * Activates the tab at the given index
+         * @param index The index of the tab
+         */
+        activateTab(index) {
+            this.foundation?.activateTab(index);
+        }
+        /**
+         * Scrolls the tab at the given index into view
+         * @param index THe index of the tab
+         */
+        scrollIntoView(index) {
+            this.foundation?.scrollIntoView(index);
+        }
+        /**
+         * Returns all the tab elements in a nice clean array
+         */
+        getTabElements_() {
+            return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _align_extraInitializers);
+        }
+    };
+    return MdcTabBar = _classThis;
+})();
+export { MdcTabBar };
+//# sourceMappingURL=mdc-tab-bar.js.map

package/dist/tab-bar/mdc-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/mdc-tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { MdcComponent, booleanAttr } from '../base';\nimport { MDCTabBarFoundation, MDCTabBarAdapter, MDCTabBarActivatedEventDetail, strings } from '@material/tab-bar';\nimport { IMdcTabElement } from './tab/mdc-tab';\nimport { MdcTabScroller } from './scroller/mdc-tab-scroller';\nimport { MDCTabInteractionEvent, MDCTabFoundation } from '@material/tab';\nimport { inject, customElement, bindable } from 'aurelia';\nimport template from './mdc-tab-bar.html?raw';\n\n// aurelia is case insensitive\nMDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();\nstrings.TAB_ACTIVATED_EVENT = strings.TAB_ACTIVATED_EVENT.toLowerCase();\n\n@inject(Element)\n@customElement({ name: 'mdc-tab-bar', template })\nexport class MdcTabBar extends MdcComponent<MDCTabBarFoundation> {\n  private tabScroller_?: MdcTabScroller; // assigned in html\n\n  @bindable({ set: booleanAttr })\n  focusOnActivate: boolean;\n  focusOnActivateChanged() {\n    this.tabScroller_?.tabs.forEach((tab) => tab.focusOnActivate = this.focusOnActivate);\n  }\n\n  @bindable({ set: booleanAttr })\n  useAutomaticActivation: boolean;\n  useAutomaticActivationChanged() {\n    this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);\n  }\n\n  @bindable()\n  align: MdcTabScroller['align'];\n\n  initialSyncWithDOM() {\n    this.focusOnActivateChanged();\n    this.useAutomaticActivationChanged();\n    for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {\n      if (this.tabScroller_!.tabs[i].active) {\n        this.scrollIntoView(i);\n        break;\n      }\n    }\n  }\n\n  handleKeyDown_(evt: KeyboardEvent) {\n    this.foundation?.handleKeyDown(evt);\n    return true;\n  }\n\n  handleTabInteraction_(evt: MDCTabInteractionEvent) {\n    this.foundation?.handleTabInteraction(evt);\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCTabBarAdapter = {\n      scrollTo: (scrollX) => this.tabScroller_!.scrollTo(scrollX),\n      incrementScroll: (scrollXIncrement) => this.tabScroller_!.incrementScroll(scrollXIncrement),\n      getScrollPosition: () => this.tabScroller_!.getScrollPosition(),\n      getScrollContentWidth: () => this.tabScroller_!.getScrollContentWidth(),\n      getOffsetWidth: () => this.root.offsetWidth,\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',\n      setActiveTab: (index) => this.foundation?.activateTab(index),\n      activateTabAtIndex: (index, clientRect) => this.tabScroller_!.tabs[index].activate(clientRect),\n      deactivateTabAtIndex: (index) => this.tabScroller_!.tabs[index].deactivate(),\n      focusTabAtIndex: (index) => this.tabScroller_!.tabs[index].focus(),\n      getTabIndicatorClientRectAtIndex: (index) => this.tabScroller_!.tabs[index].computeIndicatorClientRect(),\n      getTabDimensionsAtIndex: (index) => this.tabScroller_!.tabs[index].computeDimensions(),\n      getPreviousActiveTabIndex: () => {\n        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {\n          if (this.tabScroller_!.tabs[i].isActive()) {\n            return i;\n          }\n        }\n        return -1;\n      },\n      getFocusedTabIndex: () => {\n        const tabElements = this.getTabElements_();\n        const activeElement = document.activeElement! as IMdcTabElement;\n        return tabElements.indexOf(activeElement);\n      },\n      getIndexOfTabById: (id) => {\n        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {\n          if (this.tabScroller_!.tabs[i].id === id) {\n            return i;\n          }\n        }\n        return -1;\n      },\n      getTabListLength: () => this.tabScroller_!.tabs.length,\n      notifyTabActivated: (index) => this.emit<MDCTabBarActivatedEventDetail>(strings.TAB_ACTIVATED_EVENT, { index }, true),\n    };\n    return new MDCTabBarFoundation(adapter);\n  }\n\n  /**\n   * Activates the tab at the given index\n   * @param index The index of the tab\n   */\n  activateTab(index: number) {\n    this.foundation?.activateTab(index);\n  }\n\n  /**\n   * Scrolls the tab at the given index into view\n   * @param index THe index of the tab\n   */\n  scrollIntoView(index: number) {\n    this.foundation?.scrollIntoView(index);\n  }\n\n  /**\n   * Returns all the tab elements in a nice clean array\n   */\n  private getTabElements_(): IMdcTabElement[] {\n    return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR)) as IMdcTabElement[];\n  }\n\n}\n"]}

package/dist/tab-bar/scroller/mdc-tab-scroller.html

@@ -0,0 +1,11 @@
+<template class="mdc-tab-scroller
+  ${align ? 'mdc-tab-scroller--align-' + align : ''}
+  " wheel.trigger="handleInteraction_()" touchstart.trigger="handleInteraction_()"
+  pointerdown.trigger="handleInteraction_()" mousedown.trigger="handleInteraction_()"
+  keydown.trigger="handleInteraction_()" transitionend.trigger="handleTransitionEnd_($event)">
+  <div class="mdc-tab-scroller__scroll-area" element.ref="area_">
+    <div class="mdc-tab-scroller__scroll-content" element.ref="content_">
+      <au-slot></au-slot>
+    </div>
+  </div>
+</template>