@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/shared/index2.js

@@ -0,0 +1,21 @@
+import { F as FoundationElement, h as html, d as designSystem } from './index.js';
+import { s as styleInject } from './style-inject.es.js';
+
+class Focus 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}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _t;
+const focusTemplate = () => html(_t || (_t = _`
+        <span class="control"></span>`));
+
+const VIVIDFocus = Focus.compose({
+  baseName: 'focus',
+  template: focusTemplate,
+  styles: css_248z
+});
+designSystem.register(VIVIDFocus());
+
+export { Focus as F, VIVIDFocus as V };

package/shared/patterns/affix.d.ts

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

package/{src/shared/patterns/index.ts → shared/patterns/index.d.ts}

@@ -1 +1 @@
-export * from './affix';
+export * from './affix';

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/style-inject.es.js

@@ -0,0 +1,28 @@
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject 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

@@ -0,0 +1,54 @@
+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';
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  text,
+  icon
+}) => classNames('control', ['icon-only', !text && !!icon]);
+
+const textAnchorTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html(_t || (_t = _`<a
+        class="${0}"
+        download="${0}"
+        href="${0}"
+        hreflang="${0}"
+        ping="${0}"
+        referrerpolicy="${0}"
+        rel="${0}"
+        target="${0}"
+        type="${0}"
+        aria-atomic="${0}"
+        aria-busy="${0}"
+        aria-controls="${0}"
+        aria-current="${0}"
+        aria-describedby="${0}"
+        aria-details="${0}"
+        aria-disabled="${0}"
+        aria-errormessage="${0}"
+        aria-expanded="${0}"
+        aria-flowto="${0}"
+        aria-haspopup="${0}"
+        aria-hidden="${0}"
+        aria-invalid="${0}"
+        aria-keyshortcuts="${0}"
+        aria-label="${0}"
+        aria-labelledby="${0}"
+        aria-live="${0}"
+        aria-owns="${0}"
+        aria-relevant="${0}"
+        aria-roledescription="${0}"
+        ${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 => affixIconTemplate(x.icon), x => x.text);
+};
+
+export { textAnchorTemplate as t };