@justeattakeaway/pie-icons-webc 0.3.0 → 0.5.0

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+Creating directory "/home/runner/work/pie/pie/packages/tools/pie-icons-webc/icons".
+
+icons/*.ts → dist/icons...
+(!) Plugin typescript: @rollup/plugin-typescript TS5096: Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set.
+(!) Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
+created dist/icons in 1m 1.6s

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# @justeattakeaway/pie-icons-webc
+
+## 0.5.0
+
+### Minor Changes
+
+- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+  [Removed] - Built webc icons from source control
+  [Added] - Type declaration files for components
+  [Added] - Types for pie-icons
+  [Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
+  [Added] - Webc icon tests for width, height and base classes
+  [Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
+  [Changed] - Update pie-icons-webc rollup config to remove commonjs build
+  [Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
+
+## 0.4.0
+
+### Minor Changes
+
+- [Added] - host-context for pie-button icons and display property for the generated svgs ([#631](https://github.com/justeattakeaway/pie/pull/631)) by [@ashleynolan](https://github.com/ashleynolan)
+
+## 0.3.0
+
+### Minor Changes
+
+- [Changed] - Ensure size only gets set when it hasn't already been generated and `:host-context` styles are added for contextual styling ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
+
+  This change adds `:host-context` styles to each webc icon, so that if the icon is used
+  inside pie-icon-button, then it will apply width/height according to the custom properties
+  set by that component.
+
+## 0.2.0
+
+### Minor Changes
+
+- [Changed] - icon name changes reflected by recompile ([#594](https://github.com/justeattakeaway/pie/pull/594)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Changed] - using shared normalizeIconName function in pie-icons-configs ([#594](https://github.com/justeattakeaway/pie/pull/594)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Fixed] - Adding TS declaration and linting ignore ([#594](https://github.com/justeattakeaway/pie/pull/594)) by [@ashleynolan](https://github.com/ashleynolan)
+
+## 0.1.0
+
+### Minor Changes
+
+- [Added] - `pie-icons-webc` package for compiling SVGs as web components ([#585](https://github.com/justeattakeaway/pie/pull/585)) by [@LTurns](https://github.com/LTurns)

package/README.md

@@ -1,11 +1,11 @@
 
 # pie-icons-webc
 
-Shared PIE Icon Components built using native Web Components.
+Shared PIE Icon Components built using [Lit Web Components](https://lit.dev/docs/).
 
 This package provides the PIE iconset as importable Web Components, to ensure icons are used to PIE guidelines for sizing.
 
-The base [pie-icons](https://www.npmjs.com/package/@justeattakeaway/pie-icons) package is used to provide the SVGs that are compiled into native web components that can be imported into any application.
+The base [pie-icons](https://www.npmjs.com/package/@justeattakeaway/pie-icons) package is used to provide the SVGs that are compiled into Lit web components that can be imported into any application.
 
 ---
 
@@ -27,11 +27,17 @@ yarn add @justeattakeaway/pie-icons-webc
 
 ```js
 // Only import what you need!
-import '@justeattakeaway/pie-icons-webc/icons/IconAppRestaurant';
+import '@justeattakeaway/pie-icons-webc/icons/IconAppRestaurant'; // Import the typescript version of the icon
+// OR
+import '@justeattakeaway/pie-icons-webc/dist/icons/IconAppRestaurant.js'; // Import the ESM version of the icon
+```
 
-// Note, we don't recommend referencing named exports such as:
-// `import { IconAppRestaurant } from '@justeattakeaway/pie-icons-webc`
-// As this will require you to make a call to the icon so that it doesn't get tree-shaken by your build tool
+> **Note**
+> While it is possible to import individual components from the overall bundle, we don't recommend this because
+> it is likely that the import will be tree-shaken unless you are referencing the imported object in your code.
+```js
+import { IconAppRestaurant } from '@justeattakeaway/pie-icons-webc';
+import { IconAppRestaurant } from '@justeattakeaway/pie-icons-webc/icons';
 ```
 
 Within the context of a Lit app, that will look like:
@@ -44,7 +50,7 @@ export class MyAmazingComponent extends LitElement {
     return html`
       <h2>
         This is a heading
-        <icon-app-restaurant size="xs" />
+        <icon-app-restaurant size="xl" />
       </h2>`;
   }
 }

package/build.js

@@ -0,0 +1,136 @@
+import pascalCase from 'just-pascal-case';
+import kebabCase from 'just-kebab-case';
+import path from 'path';
+import fs from 'fs';
+
+import pieIcons from '@justeattakeaway/pie-icons';
+import {
+    normalizeIconName,
+    largeIconSizeDefault,
+    regularIconSizeDefault,
+} from '@justeattakeaway/pie-icons-configs';
+
+const { icons } = pieIcons.default;
+
+const componentTemplate = (name, svg) => {
+    const svgClasses = svg.match(/class="(.+?)"/)?.[1];
+
+    const isLargeIcon = name.endsWith('Large');
+    const sizeType = isLargeIcon ? 'LargeIconSize' : 'RegularIconSize';
+
+    return `import {
+    html, LitElement, TemplateResult, css,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { getSvgProps, ${sizeType} } from '@justeattakeaway/pie-icons-configs';
+
+interface IconProps {
+    size: ${sizeType};
+    class: string;
+}
+
+const componentSelector = '${kebabCase(name)}';
+
+export class ${name} extends LitElement implements IconProps {
+    // The following styles make sure that the icon will be sized correctly
+    static styles = css\`
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    \`;
+
+    @property({ type: String, reflect: true })
+    public size : ${sizeType} = ${isLargeIcon ? largeIconSizeDefault : `'${regularIconSizeDefault}'`};
+
+    @property({ type: String, reflect: true })
+    public class = '${svgClasses}';
+
+    @query('svg')
+    private _svg? : SVGElement;
+
+    connectedCallback () : void {
+        super.connectedCallback();
+        if (this._svg?.getAttribute('width') === null) {
+            const svgSize = getSvgProps('${svgClasses}', '', null, '${name}');
+            this._svg?.setAttribute('width', svgSize.width);
+            this._svg?.setAttribute('height', svgSize.height);
+        }
+    }
+
+    updated (changedProperties: DependentMap<IconProps>) : void {
+        let svgSize : { width: string, height: string, class: string };
+
+        if (changedProperties.has('size')) {
+            svgSize = getSvgProps('${svgClasses}', '', this.size, '${name}');
+
+            this._svg?.setAttribute('width', svgSize.width);
+            this._svg?.setAttribute('height', svgSize.height);
+        }
+    }
+
+    render () : TemplateResult {
+        return html\`${svg}\`;
+    }
+}
+
+if (customElements.get(componentSelector) === undefined) {
+    customElements.define(componentSelector, ${name});
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: ${name};
+    }
+}
+`;
+};
+
+const ICONS_DIR = `${process.cwd()}/icons`;
+const indexPath = path.join(ICONS_DIR, '/index.ts');
+
+async function checkDirExists (directoryPath) {
+    try {
+        if (!fs.existsSync(directoryPath)) {
+            console.info(`Creating directory "${directoryPath}".`);
+            fs.mkdirSync(directoryPath);
+        } else {
+            console.info(`Directory "${directoryPath}" already exists.`);
+        }
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function build () {
+    // check if /icons directory exists, if not create it
+    await checkDirExists(ICONS_DIR);
+
+    let indexFileString = '';
+
+    // loop through the icons in pie-icons, generate each component and add it to the index.ts
+    Object.keys(icons).forEach((iconKey) => {
+        const icon = icons[iconKey];
+        const { pathPrefix } = icon;
+        const capitalisedPathPrefix = (pathPrefix !== undefined ? (pathPrefix).substring(1, 2).toUpperCase() + (pathPrefix).substring(2) : '');
+        const pascalCasedName = pascalCase(normalizeIconName(iconKey));
+
+        const componentName = `Icon${capitalisedPathPrefix + pascalCasedName}`;
+
+        const svg = icon.toSvg();
+
+        let component = componentTemplate(componentName, svg);
+        component = component.replace(/xlink:href/g, 'xlinkHref'); // replace so it gets parsed by JSX correctly
+
+        indexFileString += `export { ${componentName} } from './${componentName}';\n`;
+
+        fs.writeFileSync(`./icons/${componentName}.ts`, component, 'utf8');
+    });
+
+    fs.writeFileSync(indexPath, indexFileString, 'utf8');
+}
+
+build();

package/dist/icons/IconAlcohol.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { RegularIconSize } from '@justeattakeaway/pie-icons-configs';
+interface IconProps {
+    size: RegularIconSize;
+    class: string;
+}
+declare const componentSelector = "icon-alcohol";
+export declare class IconAlcohol extends LitElement implements IconProps {
+    static styles: import("lit").CSSResult;
+    size: RegularIconSize;
+    class: string;
+    private _svg?;
+    connectedCallback(): void;
+    updated(changedProperties: DependentMap<IconProps>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: IconAlcohol;
+    }
+}
+export {};
+//# sourceMappingURL=IconAlcohol.d.ts.map

package/dist/icons/IconAlcohol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlcohol.d.ts","sourceRoot":"","sources":["../../icons/IconAlcohol.ts"],"names":[],"mappings":"AAAA,OAAO,EACG,UAAU,EAAE,cAAc,EACnC,MAAM,KAAK,CAAC;AAEb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAe,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAElF,UAAU,SAAS;IACf,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,iBAAiB,CAAC;AAEzC,qBAAa,WAAY,SAAQ,UAAW,YAAW,SAAS;IAE5D,MAAM,CAAC,MAAM,0BAOX;IAGK,IAAI,EAAG,eAAe,CAAQ;IAG9B,KAAK,SAAkC;IAG9C,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3B,iBAAiB,IAAM,IAAI;IAS3B,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,IAAI;IAW3D,MAAM,IAAM,cAAc;CAG7B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}

package/dist/icons/IconAlcohol.js

@@ -0,0 +1,54 @@
+import { i, _ as __decorate, n, a as i$1, s, g as getSvgProps, x } from './configs-4ff9e012.js';
+
+const componentSelector = 'icon-alcohol';
+class IconAlcohol extends s {
+    constructor() {
+        super(...arguments);
+        this.size = 'xs';
+        this.class = 'c-pieIcon c-pieIcon--alcohol';
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        if (((_a = this._svg) === null || _a === void 0 ? void 0 : _a.getAttribute('width')) === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--alcohol', '', null, 'IconAlcohol');
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('width', svgSize.width);
+            (_c = this._svg) === null || _c === void 0 ? void 0 : _c.setAttribute('height', svgSize.height);
+        }
+    }
+    updated(changedProperties) {
+        var _a, _b;
+        let svgSize;
+        if (changedProperties.has('size')) {
+            svgSize = getSvgProps('c-pieIcon c-pieIcon--alcohol', '', this.size, 'IconAlcohol');
+            (_a = this._svg) === null || _a === void 0 ? void 0 : _a.setAttribute('width', svgSize.width);
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('height', svgSize.height);
+        }
+    }
+    render() {
+        return x `<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alcohol"><path d="M6.4 5.28V2.576c0-.419-.17-.82-.472-1.115A1.624 1.624 0 0 0 4.791 1h-.68c-.426 0-.835.166-1.137.462a1.561 1.561 0 0 0-.47 1.115v2.702a2.11 2.11 0 0 1-.534 1.45 4.613 4.613 0 0 0-.964 3.055v3.603c-.015.401.132.792.409 1.087.277.295.661.471 1.07.49h3.933a1.566 1.566 0 0 0 1.07-.49c.277-.295.424-.686.41-1.087V9.784a4.611 4.611 0 0 0-.92-3.054A2.112 2.112 0 0 1 6.4 5.28ZM3.881 2.576c0-.06.024-.117.067-.16a.232.232 0 0 1 .162-.066h.68c.061 0 .12.024.163.066.043.043.067.1.067.16v1.126h-1.14V2.577Zm1.14 2.477v.225a3.426 3.426 0 0 0 .77 2.19c.168.222.313.46.433.711H2.678c.12-.25.265-.489.432-.712a3.426 3.426 0 0 0 .772-2.189v-.225h1.14Zm1.497 8.333a.257.257 0 0 1-.101.226H2.485a.262.262 0 0 1-.101-.226V9.56H6.51v.225l.009 3.603ZM8.605 3.081v4c0 .713.249 1.405.705 1.96a3.198 3.198 0 0 0 1.803 1.094v3.514h-1.46V15h4.3v-1.351h-1.461v-3.514a3.198 3.198 0 0 0 1.803-1.093A3.088 3.088 0 0 0 15 7.082v-4H8.605Zm5.035 4c0 .478-.194.936-.538 1.274a1.856 1.856 0 0 1-1.3.528c-.487 0-.954-.19-1.3-.528a1.784 1.784 0 0 1-.537-1.274V4.432h3.675v2.65Z"></path></svg>`;
+    }
+}
+// The following styles make sure that the icon will be sized correctly
+IconAlcohol.styles = i `
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcohol.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcohol.prototype, "class", void 0);
+__decorate([
+    i$1('svg')
+], IconAlcohol.prototype, "_svg", void 0);
+if (customElements.get(componentSelector) === undefined) {
+    customElements.define(componentSelector, IconAlcohol);
+}
+
+export { IconAlcohol };

package/dist/icons/IconAlcoholFilled.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { RegularIconSize } from '@justeattakeaway/pie-icons-configs';
+interface IconProps {
+    size: RegularIconSize;
+    class: string;
+}
+declare const componentSelector = "icon-alcohol-filled";
+export declare class IconAlcoholFilled extends LitElement implements IconProps {
+    static styles: import("lit").CSSResult;
+    size: RegularIconSize;
+    class: string;
+    private _svg?;
+    connectedCallback(): void;
+    updated(changedProperties: DependentMap<IconProps>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: IconAlcoholFilled;
+    }
+}
+export {};
+//# sourceMappingURL=IconAlcoholFilled.d.ts.map

package/dist/icons/IconAlcoholFilled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlcoholFilled.d.ts","sourceRoot":"","sources":["../../icons/IconAlcoholFilled.ts"],"names":[],"mappings":"AAAA,OAAO,EACG,UAAU,EAAE,cAAc,EACnC,MAAM,KAAK,CAAC;AAEb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAe,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAElF,UAAU,SAAS;IACf,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAEhD,qBAAa,iBAAkB,SAAQ,UAAW,YAAW,SAAS;IAElE,MAAM,CAAC,MAAM,0BAOX;IAGK,IAAI,EAAG,eAAe,CAAQ;IAG9B,KAAK,SAAwC;IAGpD,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3B,iBAAiB,IAAM,IAAI;IAS3B,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,IAAI;IAW3D,MAAM,IAAM,cAAc;CAG7B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}

package/dist/icons/IconAlcoholFilled.js

@@ -0,0 +1,54 @@
+import { i, _ as __decorate, n, a as i$1, s, g as getSvgProps, x } from './configs-4ff9e012.js';
+
+const componentSelector = 'icon-alcohol-filled';
+class IconAlcoholFilled extends s {
+    constructor() {
+        super(...arguments);
+        this.size = 'xs';
+        this.class = 'c-pieIcon c-pieIcon--alcoholFilled';
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        if (((_a = this._svg) === null || _a === void 0 ? void 0 : _a.getAttribute('width')) === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholFilled', '', null, 'IconAlcoholFilled');
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('width', svgSize.width);
+            (_c = this._svg) === null || _c === void 0 ? void 0 : _c.setAttribute('height', svgSize.height);
+        }
+    }
+    updated(changedProperties) {
+        var _a, _b;
+        let svgSize;
+        if (changedProperties.has('size')) {
+            svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholFilled', '', this.size, 'IconAlcoholFilled');
+            (_a = this._svg) === null || _a === void 0 ? void 0 : _a.setAttribute('width', svgSize.width);
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('height', svgSize.height);
+        }
+    }
+    render() {
+        return x `<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></path></svg>`;
+    }
+}
+// The following styles make sure that the icon will be sized correctly
+IconAlcoholFilled.styles = i `
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholFilled.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholFilled.prototype, "class", void 0);
+__decorate([
+    i$1('svg')
+], IconAlcoholFilled.prototype, "_svg", void 0);
+if (customElements.get(componentSelector) === undefined) {
+    customElements.define(componentSelector, IconAlcoholFilled);
+}
+
+export { IconAlcoholFilled };

package/dist/icons/IconAlcoholFilledLarge.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { LargeIconSize } from '@justeattakeaway/pie-icons-configs';
+interface IconProps {
+    size: LargeIconSize;
+    class: string;
+}
+declare const componentSelector = "icon-alcohol-filled-large";
+export declare class IconAlcoholFilledLarge extends LitElement implements IconProps {
+    static styles: import("lit").CSSResult;
+    size: LargeIconSize;
+    class: string;
+    private _svg?;
+    connectedCallback(): void;
+    updated(changedProperties: DependentMap<IconProps>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: IconAlcoholFilledLarge;
+    }
+}
+export {};
+//# sourceMappingURL=IconAlcoholFilledLarge.d.ts.map

package/dist/icons/IconAlcoholFilledLarge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlcoholFilledLarge.d.ts","sourceRoot":"","sources":["../../icons/IconAlcoholFilledLarge.ts"],"names":[],"mappings":"AAAA,OAAO,EACG,UAAU,EAAE,cAAc,EACnC,MAAM,KAAK,CAAC;AAEb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAe,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEhF,UAAU,SAAS;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,8BAA8B,CAAC;AAEtD,qBAAa,sBAAuB,SAAQ,UAAW,YAAW,SAAS;IAEvE,MAAM,CAAC,MAAM,0BAOX;IAGK,IAAI,EAAG,aAAa,CAAM;IAG1B,KAAK,SAA6C;IAGzD,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3B,iBAAiB,IAAM,IAAI;IAS3B,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,IAAI;IAW3D,MAAM,IAAM,cAAc;CAG7B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;KAC/C;CACJ"}

package/dist/icons/IconAlcoholFilledLarge.js

@@ -0,0 +1,54 @@
+import { i, _ as __decorate, n, a as i$1, s, g as getSvgProps, x } from './configs-4ff9e012.js';
+
+const componentSelector = 'icon-alcohol-filled-large';
+class IconAlcoholFilledLarge extends s {
+    constructor() {
+        super(...arguments);
+        this.size = 32;
+        this.class = 'c-pieIcon c-pieIcon--alcoholFilledLarge';
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        if (((_a = this._svg) === null || _a === void 0 ? void 0 : _a.getAttribute('width')) === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholFilledLarge', '', null, 'IconAlcoholFilledLarge');
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('width', svgSize.width);
+            (_c = this._svg) === null || _c === void 0 ? void 0 : _c.setAttribute('height', svgSize.height);
+        }
+    }
+    updated(changedProperties) {
+        var _a, _b;
+        let svgSize;
+        if (changedProperties.has('size')) {
+            svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholFilledLarge', '', this.size, 'IconAlcoholFilledLarge');
+            (_a = this._svg) === null || _a === void 0 ? void 0 : _a.setAttribute('width', svgSize.width);
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('height', svgSize.height);
+        }
+    }
+    render() {
+        return x `<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--alcoholFilledLarge"><path d="M17.444 6.918v7.253a5.67 5.67 0 0 0 4.786 5.583v7.621h-3.22v1.75h8.199v-1.75H23.98v-7.621a5.662 5.662 0 0 0 4.786-5.583V6.918H17.444Zm9.572 4.278c-2.406.691-3.325.394-4.375 0a7 7 0 0 0-3.5-.411V8.668h7.823l.052 2.528Z"></path><path d="M14.679 16a10.049 10.049 0 0 0-1.208-2.188 5.005 5.005 0 0 1-1.024-2.187 5.82 5.82 0 0 1-.06-.822V5.5A2.625 2.625 0 0 0 9.76 2.875H8.466A2.625 2.625 0 0 0 5.841 5.5v5.303c.001.275-.022.55-.07.822a5.005 5.005 0 0 1-1.024 2.188A9.696 9.696 0 0 0 3.55 16a8.751 8.751 0 0 0-.438 1.75c-.08.58-.122 1.165-.122 1.75v7a2.511 2.511 0 0 0 2.371 2.625h7.499a2.52 2.52 0 0 0 2.38-2.625v-7c.007-.585-.031-1.17-.114-1.75a8.262 8.262 0 0 0-.446-1.75ZM6.19 14.81a6.484 6.484 0 0 0 1.4-4.008v-.927h3.045v.928c0 .274.015.549.044.822a6.484 6.484 0 0 0 1.356 3.185c.271.38.517.777.735 1.19H5.5a9.41 9.41 0 0 1 .691-1.19Z"></path></svg>`;
+    }
+}
+// The following styles make sure that the icon will be sized correctly
+IconAlcoholFilledLarge.styles = i `
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholFilledLarge.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholFilledLarge.prototype, "class", void 0);
+__decorate([
+    i$1('svg')
+], IconAlcoholFilledLarge.prototype, "_svg", void 0);
+if (customElements.get(componentSelector) === undefined) {
+    customElements.define(componentSelector, IconAlcoholFilledLarge);
+}
+
+export { IconAlcoholFilledLarge };

package/dist/icons/IconAlcoholLarge.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { LargeIconSize } from '@justeattakeaway/pie-icons-configs';
+interface IconProps {
+    size: LargeIconSize;
+    class: string;
+}
+declare const componentSelector = "icon-alcohol-large";
+export declare class IconAlcoholLarge extends LitElement implements IconProps {
+    static styles: import("lit").CSSResult;
+    size: LargeIconSize;
+    class: string;
+    private _svg?;
+    connectedCallback(): void;
+    updated(changedProperties: DependentMap<IconProps>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: IconAlcoholLarge;
+    }
+}
+export {};
+//# sourceMappingURL=IconAlcoholLarge.d.ts.map

package/dist/icons/IconAlcoholLarge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlcoholLarge.d.ts","sourceRoot":"","sources":["../../icons/IconAlcoholLarge.ts"],"names":[],"mappings":"AAAA,OAAO,EACG,UAAU,EAAE,cAAc,EACnC,MAAM,KAAK,CAAC;AAEb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAe,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEhF,UAAU,SAAS;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,uBAAuB,CAAC;AAE/C,qBAAa,gBAAiB,SAAQ,UAAW,YAAW,SAAS;IAEjE,MAAM,CAAC,MAAM,0BAOX;IAGK,IAAI,EAAG,aAAa,CAAM;IAG1B,KAAK,SAAuC;IAGnD,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3B,iBAAiB,IAAM,IAAI;IAS3B,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,IAAI;IAW3D,MAAM,IAAM,cAAc;CAG7B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;KACzC;CACJ"}

package/dist/icons/IconAlcoholLarge.js

@@ -0,0 +1,54 @@
+import { i, _ as __decorate, n, a as i$1, s, g as getSvgProps, x } from './configs-4ff9e012.js';
+
+const componentSelector = 'icon-alcohol-large';
+class IconAlcoholLarge extends s {
+    constructor() {
+        super(...arguments);
+        this.size = 32;
+        this.class = 'c-pieIcon c-pieIcon--alcoholLarge';
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        if (((_a = this._svg) === null || _a === void 0 ? void 0 : _a.getAttribute('width')) === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholLarge', '', null, 'IconAlcoholLarge');
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('width', svgSize.width);
+            (_c = this._svg) === null || _c === void 0 ? void 0 : _c.setAttribute('height', svgSize.height);
+        }
+    }
+    updated(changedProperties) {
+        var _a, _b;
+        let svgSize;
+        if (changedProperties.has('size')) {
+            svgSize = getSvgProps('c-pieIcon c-pieIcon--alcoholLarge', '', this.size, 'IconAlcoholLarge');
+            (_a = this._svg) === null || _a === void 0 ? void 0 : _a.setAttribute('width', svgSize.width);
+            (_b = this._svg) === null || _b === void 0 ? void 0 : _b.setAttribute('height', svgSize.height);
+        }
+    }
+    render() {
+        return x `<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--alcoholLarge"><path d="M12.386 10.811V5.5a2.625 2.625 0 0 0-2.625-2.625H8.466A2.625 2.625 0 0 0 5.841 5.5v5.311a4.655 4.655 0 0 1-1.085 3.01 8.671 8.671 0 0 0-1.75 5.679v7a2.52 2.52 0 0 0 2.38 2.625h7.499a2.511 2.511 0 0 0 2.371-2.625v-7a8.75 8.75 0 0 0-1.75-5.679 4.612 4.612 0 0 1-1.12-3.01ZM7.591 5.5a.875.875 0 0 1 .875-.875H9.77a.875.875 0 0 1 .875.875v2.625H7.591V5.5Zm-1.4 9.31a6.248 6.248 0 0 0 1.4-3.999v-.936h3.045v.936a6.248 6.248 0 0 0 1.4 3.999c.27.38.516.778.735 1.19H5.5c.184-.429.438-.805.691-1.19ZM13.49 26.5c0 .473-.28.875-.622.875H5.37c-.341 0-.63-.402-.63-.875v-7c-.005-.586.042-1.172.14-1.75h8.496c.098.578.145 1.164.14 1.75l-.026 7Zm15.286-12.329V6.918H17.453v7.253a5.679 5.679 0 0 0 4.786 5.591v7.613h-3.22v1.75h8.199v-1.75h-3.23v-7.613a5.67 5.67 0 0 0 4.787-5.59Zm-1.75-5.503v2.528c-2.406.7-3.325.403-4.375.044a6.825 6.825 0 0 0-3.5-.42V8.668h7.875Zm-7.822 5.503V12.58a5.127 5.127 0 0 1 2.896.315 6.93 6.93 0 0 0 2.45.481 10.232 10.232 0 0 0 2.476-.359v1.155a3.911 3.911 0 1 1-7.822 0Z"></path></svg>`;
+    }
+}
+// The following styles make sure that the icon will be sized correctly
+IconAlcoholLarge.styles = i `
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholLarge.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], IconAlcoholLarge.prototype, "class", void 0);
+__decorate([
+    i$1('svg')
+], IconAlcoholLarge.prototype, "_svg", void 0);
+if (customElements.get(componentSelector) === undefined) {
+    customElements.define(componentSelector, IconAlcoholLarge);
+}
+
+export { IconAlcoholLarge };

package/dist/icons/IconAlertCircle.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { RegularIconSize } from '@justeattakeaway/pie-icons-configs';
+interface IconProps {
+    size: RegularIconSize;
+    class: string;
+}
+declare const componentSelector = "icon-alert-circle";
+export declare class IconAlertCircle extends LitElement implements IconProps {
+    static styles: import("lit").CSSResult;
+    size: RegularIconSize;
+    class: string;
+    private _svg?;
+    connectedCallback(): void;
+    updated(changedProperties: DependentMap<IconProps>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: IconAlertCircle;
+    }
+}
+export {};
+//# sourceMappingURL=IconAlertCircle.d.ts.map

package/dist/icons/IconAlertCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlertCircle.d.ts","sourceRoot":"","sources":["../../icons/IconAlertCircle.ts"],"names":[],"mappings":"AAAA,OAAO,EACG,UAAU,EAAE,cAAc,EACnC,MAAM,KAAK,CAAC;AAEb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAe,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAElF,UAAU,SAAS;IACf,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,sBAAsB,CAAC;AAE9C,qBAAa,eAAgB,SAAQ,UAAW,YAAW,SAAS;IAEhE,MAAM,CAAC,MAAM,0BAOX;IAGK,IAAI,EAAG,eAAe,CAAQ;IAG9B,KAAK,SAAsC;IAGlD,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3B,iBAAiB,IAAM,IAAI;IAS3B,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,IAAI;IAW3D,MAAM,IAAM,cAAc;CAG7B;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC;KACxC;CACJ"}