@vonage/vivid 3.0.0-next.5 → 3.0.0-next.50

package/shared/index.js

@@ -275,30 +275,6 @@ const DOM = Object.freeze({
     },
 });
 
-function spilloverSubscribe(subscriber) {
-    const spillover = this.spillover;
-    const index = spillover.indexOf(subscriber);
-    if (index === -1) {
-        spillover.push(subscriber);
-    }
-}
-function spilloverUnsubscribe(subscriber) {
-    const spillover = this.spillover;
-    const index = spillover.indexOf(subscriber);
-    if (index !== -1) {
-        spillover.splice(index, 1);
-    }
-}
-function spilloverNotifySubscribers(args) {
-    const spillover = this.spillover;
-    const source = this.source;
-    for (let i = 0, ii = spillover.length; i < ii; ++i) {
-        spillover[i].handleChange(source, args);
-    }
-}
-function spilloverHas(subscriber) {
-    return this.spillover.indexOf(subscriber) !== -1;
-}
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
@@ -328,42 +304,58 @@ class SubscriberSet {
      * @param subscriber - The subscriber to test for inclusion in this set.
      */
     has(subscriber) {
-        return this.sub1 === subscriber || this.sub2 === subscriber;
+        return this.spillover === void 0
+            ? this.sub1 === subscriber || this.sub2 === subscriber
+            : this.spillover.indexOf(subscriber) !== -1;
     }
     /**
      * Subscribes to notification of changes in an object's state.
      * @param subscriber - The object that is subscribing for change notification.
      */
     subscribe(subscriber) {
-        if (this.has(subscriber)) {
-            return;
-        }
-        if (this.sub1 === void 0) {
-            this.sub1 = subscriber;
-            return;
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.has(subscriber)) {
+                return;
+            }
+            if (this.sub1 === void 0) {
+                this.sub1 = subscriber;
+                return;
+            }
+            if (this.sub2 === void 0) {
+                this.sub2 = subscriber;
+                return;
+            }
+            this.spillover = [this.sub1, this.sub2, subscriber];
+            this.sub1 = void 0;
+            this.sub2 = void 0;
         }
-        if (this.sub2 === void 0) {
-            this.sub2 = subscriber;
-            return;
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index === -1) {
+                spillover.push(subscriber);
+            }
         }
-        this.spillover = [this.sub1, this.sub2, subscriber];
-        this.subscribe = spilloverSubscribe;
-        this.unsubscribe = spilloverUnsubscribe;
-        this.notify = spilloverNotifySubscribers;
-        this.has = spilloverHas;
-        this.sub1 = void 0;
-        this.sub2 = void 0;
     }
     /**
      * Unsubscribes from notification of changes in an object's state.
      * @param subscriber - The object that is unsubscribing from change notification.
      */
     unsubscribe(subscriber) {
-        if (this.sub1 === subscriber) {
-            this.sub1 = void 0;
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.sub1 === subscriber) {
+                this.sub1 = void 0;
+            }
+            else if (this.sub2 === subscriber) {
+                this.sub2 = void 0;
+            }
         }
-        else if (this.sub2 === subscriber) {
-            this.sub2 = void 0;
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index !== -1) {
+                spillover.splice(index, 1);
+            }
         }
     }
     /**
@@ -371,14 +363,22 @@ class SubscriberSet {
      * @param args - Data passed along to subscribers during notification.
      */
     notify(args) {
-        const sub1 = this.sub1;
-        const sub2 = this.sub2;
+        const spillover = this.spillover;
         const source = this.source;
-        if (sub1 !== void 0) {
-            sub1.handleChange(source, args);
+        if (spillover === void 0) {
+            const sub1 = this.sub1;
+            const sub2 = this.sub2;
+            if (sub1 !== void 0) {
+                sub1.handleChange(source, args);
+            }
+            if (sub2 !== void 0) {
+                sub2.handleChange(source, args);
+            }
         }
-        if (sub2 !== void 0) {
-            sub2.handleChange(source, args);
+        else {
+            for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                spillover[i].handleChange(source, args);
+            }
         }
     }
 }
@@ -424,7 +424,8 @@ class PropertyChangeNotifier {
             subscribers.subscribe(subscriber);
         }
         else {
-            this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+            this.sourceSubscribers =
+                (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
             this.sourceSubscribers.subscribe(subscriber);
         }
     }
@@ -568,6 +569,7 @@ const Observable = FAST.getById(2 /* observable */, () => {
                     watcher = void 0;
                     /* eslint-disable-next-line */
                     prevValue = prev.propertySource[prev.propertyName];
+                    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
                     watcher = this;
                     if (propertySource === prevValue) {
                         this.needsRefresh = true;
@@ -707,6 +709,21 @@ const Observable = FAST.getById(2 /* observable */, () => {
 function observable(target, nameOrAccessor) {
     Observable.defineProperty(target, nameOrAccessor);
 }
+/**
+ * Decorator: Marks a property getter as having volatile observable dependencies.
+ * @param target - The target that the property is defined on.
+ * @param name - The property name.
+ * @param name - The existing descriptor.
+ * @public
+ */
+function volatile(target, name, descriptor) {
+    return Object.assign({}, descriptor, {
+        get: function () {
+            Observable.trackVolatile();
+            return descriptor.get.apply(this);
+        },
+    });
+}
 const contextEvent = FAST.getById(3 /* contextEvent */, () => {
     let current = null;
     return {
@@ -1128,6 +1145,7 @@ class CompilationContext {
         this.targetIndex = -1;
     }
     release() {
+        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
         sharedContext = this;
     }
     static borrow(directives) {
@@ -1606,8 +1624,6 @@ function html(strings, ...values) {
 class ElementStyles {
     constructor() {
         this.targets = new WeakSet();
-        /** @internal */
-        this.behaviors = null;
     }
     /** @internal */
     addStylesTo(target) {
@@ -2473,7 +2489,7 @@ class CSSDirective {
     }
 }
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -2503,6 +2519,13 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 }
 
 /**
@@ -4988,4 +5011,4 @@ function provideVividDesignSystem(element) {
 }
 const designSystem = provideVividDesignSystem();
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, booleanConverter as f, HTMLView as g, html as h, __classPrivateFieldSet as i, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p, volatile as v };

package/shared/index2.js

@@ -1,21 +1,37 @@
-import { F as FoundationElement, h as html, d as designSystem } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from './index.js';
 import { s as styleInject } from './style-inject.es.js';
+import { c as classNames } from './class-names.js';
 
-class Focus extends FoundationElement {}
+class Elevation extends FoundationElement {}
 
-var css_248z = ":host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 2px var(--focus-stroke-color, var(--vvd-color-on-canvas)), inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: 0;\n}";
+__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
+
+__decorate([attr({
+  attribute: 'no-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
+
+var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background-color: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n  filter: none;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
     _t;
-const focusTemplate = () => html(_t || (_t = _`
-        <span class="control"></span>`));
 
-const VIVIDFocus = Focus.compose({
-  baseName: 'focus',
-  template: focusTemplate,
+const getClasses = ({
+  dp,
+  noShadow
+}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
+
+const elevationTemplate = () => html(_t || (_t = _`
+        <div class="${0}" part="base">
+			<slot></slot>
+		</div>`), getClasses);
+
+const vividElevation = Elevation.compose({
+  baseName: 'elevation',
+  template: elevationTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDFocus());
+designSystem.register(vividElevation());
 
-export { Focus as F, VIVIDFocus as V };
+export { Elevation as E, vividElevation as v };