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

package/shared/patterns/affix.d.ts

@@ -1,10 +1,9 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-export declare class Prefix {
+export declare class AffixIcon {
     icon?: string;
 }
-export declare class PrefixOrSuffix extends Prefix {
+export declare class AffixIconWithTrailing extends AffixIcon {
     iconTrailing: boolean;
 }
-export declare const prefixTemplate: (context: ElementDefinitionContext) => ViewTemplate<Prefix>;
-export declare const prefixOrSuffixTemplate: (context: ElementDefinitionContext) => ViewTemplate<PrefixOrSuffix>;
+export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string) => ViewTemplate<AffixIcon> | null;

package/shared/slotted.js

@@ -0,0 +1,119 @@
+import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective } from './index.js';
+
+/**
+ * Creates a function that can be used to filter a Node array, selecting only elements.
+ * @param selector - An optional selector to restrict the filter to.
+ * @public
+ */
+function elements(selector) {
+    if (selector) {
+        return function (value, index, array) {
+            return value.nodeType === 1 && value.matches(selector);
+        };
+    }
+    return function (value, index, array) {
+        return value.nodeType === 1;
+    };
+}
+/**
+ * A base class for node observation.
+ * @internal
+ */
+class NodeObservationBehavior {
+    /**
+     * Creates an instance of NodeObservationBehavior.
+     * @param target - The target to assign the nodes property on.
+     * @param options - The options to use in configuring node observation.
+     */
+    constructor(target, options) {
+        this.target = target;
+        this.options = options;
+        this.source = null;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source) {
+        const name = this.options.property;
+        this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
+        this.source = source;
+        this.updateTarget(this.computeNodes());
+        if (this.shouldUpdate) {
+            this.observe();
+        }
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind() {
+        this.updateTarget(emptyArray);
+        this.source = null;
+        if (this.shouldUpdate) {
+            this.disconnect();
+        }
+    }
+    /** @internal */
+    handleEvent() {
+        this.updateTarget(this.computeNodes());
+    }
+    computeNodes() {
+        let nodes = this.getNodes();
+        if (this.options.filter !== void 0) {
+            nodes = nodes.filter(this.options.filter);
+        }
+        return nodes;
+    }
+    updateTarget(value) {
+        this.source[this.options.property] = value;
+    }
+}
+
+/**
+ * The runtime behavior for slotted node observation.
+ * @public
+ */
+class SlottedBehavior extends NodeObservationBehavior {
+    /**
+     * Creates an instance of SlottedBehavior.
+     * @param target - The slot element target to observe.
+     * @param options - The options to use when observing the slot.
+     */
+    constructor(target, options) {
+        super(target, options);
+    }
+    /**
+     * Begins observation of the nodes.
+     */
+    observe() {
+        this.target.addEventListener("slotchange", this);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     */
+    disconnect() {
+        this.target.removeEventListener("slotchange", this);
+    }
+    /**
+     * Retrieves the nodes that should be assigned to the target.
+     */
+    getNodes() {
+        return this.target.assignedNodes(this.options);
+    }
+}
+/**
+ * A directive that observes the `assignedNodes()` of a slot and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure slotted node observation.
+ * @public
+ */
+function slotted(propertyOrOptions) {
+    if (typeof propertyOrOptions === "string") {
+        propertyOrOptions = { property: propertyOrOptions };
+    }
+    return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+}
+
+export { elements as e, slotted as s };

package/shared/text-anchor.js

@@ -0,0 +1,21 @@
+import './web.dom-collections.iterator.js';
+import { _ as __decorate, a as attr, b as __metadata } from './index.js';
+import { b as AffixIcon } from './affix.js';
+import { A as Anchor } from './anchor.js';
+import { a as applyMixins } from './apply-mixins.js';
+
+class TextAnchor extends Anchor {
+  constructor() {
+    super(...arguments);
+    this.text = '';
+  }
+
+}
+
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
+
+applyMixins(TextAnchor, AffixIcon);
+
+export { TextAnchor as T };

package/shared/text-anchor.template.js

@@ -1,26 +1,19 @@
-import './web.dom-collections.iterator.js';
-import { _ as __decorate, a as attr, b as __metadata, h as html } from './index2.js';
-import { A as Anchor } from './anchor.js';
+import { a as affixIconTemplateFactory } from './affix.js';
+import { h as html } from './index.js';
 import { r as ref } from './aria-global.js';
 import { c as classNames } from './class-names.js';
 
-class TextAnchor extends Anchor {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
-
-__decorate([attr, __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
-
-let _2 = t => t,
+let _ = t => t,
     _t;
 
-const getClasses = _ => classNames('control');
+const getClasses = ({
+  text,
+  icon
+}) => classNames('control', ['icon-only', !text && !!icon]);
 
-const textAnchorTemplate = () => html(_t || (_t = _2`
-    <a
+const textAnchorTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html(_t || (_t = _`<a
         class="${0}"
         download="${0}"
         href="${0}"
@@ -53,7 +46,9 @@ const textAnchorTemplate = () => html(_t || (_t = _2`
         ${0}
     >
       ${0}
+      ${0}
     </a>
-`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), x => x.text);
+`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), x => affixIconTemplate(x.icon), x => x.text);
+};
 
-export { TextAnchor as T, textAnchorTemplate as t };
+export { textAnchorTemplate as t };