@telepath-computer/television 0.1.128 → 0.1.142

package/dist/canonical/v1/components.js

@@ -154,4 +154,87 @@ if (!customElements.get("checkbox-list")) {
 if (!customElements.get("checkbox-item")) {
     customElements.define("checkbox-item", CheckboxItemElement);
 }
+const DEFAULT_ICON_SIZE = 16;
+const MEDIUM_ICON_SIZE = 24;
+const LARGE_ICON_SIZE = 32;
+const ICONS = {
+    plus: {
+        regular: `<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/>`,
+        bold: `<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"/>`,
+    },
+    "subtract-square": {
+        regular: `<path d="M224,160V96a8,8,0,0,0-8-8H168V40a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V160a8,8,0,0,0,8,8H88v48a8,8,0,0,0,8,8H216a8,8,0,0,0,8-8V160Zm-60.69,48-40-40h33.38l40,40ZM168,156.69V123.31l40,40v33.38Zm40-16L171.31,104H208ZM48,48H152v56h0v48H48Zm56,123.31L140.69,208H104Z"/>`,
+        duotone: `<path d="M216,96V216H96V160h64V96Z" opacity="0.2"/><path d="M216,88H168V40a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V160a8,8,0,0,0,8,8H88v48a8,8,0,0,0,8,8H216a8,8,0,0,0,8-8V96A8,8,0,0,0,216,88ZM48,48H152V152H48ZM208,208H104V168h56a8,8,0,0,0,8-8V104h40Z"/>`,
+    },
+    television: {
+        regular: `<path d="M216,64H147.31l34.35-34.34a8,8,0,1,0-11.32-11.32L128,60.69,85.66,18.34A8,8,0,0,0,74.34,29.66L108.69,64H40A16,16,0,0,0,24,80V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64ZM40,80H144V200H40ZM216,200H160V80h56V200Zm-16-84a12,12,0,1,1-12-12A12,12,0,0,1,200,116Zm0,48a12,12,0,1,1-12-12A12,12,0,0,1,200,164Z"/>`,
+    },
+    "squares-four": {
+        regular: `<path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/>`,
+        duotone: `<path d="M112,56v48a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h48A8,8,0,0,1,112,56Zm88-8H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V56A8,8,0,0,0,200,48Zm-96,96H56a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,104,144Zm96,0H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,200,144Z" opacity="0.2"/><path d="M200,136H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48ZM104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Z"/>`,
+    },
+};
+const STYLES = `
+  :host {
+    display: inline-flex;
+    width: var(--ui-icon-size, 1em);
+    height: var(--ui-icon-size, 1em);
+    vertical-align: -0.125em;
+    color: var(--ui-icon-color, currentColor);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`;
+function isIconName(value) {
+    return value === "plus" || value === "subtract-square" || value === "squares-four" || value === "television";
+}
+function isIconWeight(value) {
+    return value === "regular" || value === "bold" || value === "duotone";
+}
+export class IconElement extends HTMLElement {
+    static observedAttributes = ["name", "weight", "size"];
+    #root;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.#render();
+    }
+    attributeChangedCallback() {
+        this.#render();
+    }
+    #render() {
+        const name = this.#name();
+        const weight = this.#weight();
+        const size = this.#size();
+        const icon = ICONS[name];
+        const source = icon[weight] ?? icon.regular;
+        this.#root.innerHTML = `
+      <style>${STYLES}</style>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" focusable="false">${source}</svg>
+    `;
+        this.style.setProperty("--ui-icon-size", `${size}px`);
+    }
+    #name() {
+        const value = this.getAttribute("name");
+        return isIconName(value) ? value : "subtract-square";
+    }
+    #weight() {
+        const value = this.getAttribute("weight");
+        return isIconWeight(value) ? value : "regular";
+    }
+    #size() {
+        const value = Number(this.getAttribute("size"));
+        return value === MEDIUM_ICON_SIZE || value === LARGE_ICON_SIZE ? value : DEFAULT_ICON_SIZE;
+    }
+}
+if (!customElements.get("ui-icon")) {
+    customElements.define("ui-icon", IconElement);
+}
 

package/dist/canonical/v1/styles.css

@@ -20,8 +20,6 @@ html,
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
 }
 
 h1,