@outbook/webcomponents-clip-flag 1.0.0 → 1.0.1

package/_lib/constants.js

@@ -0,0 +1,4 @@
+export const RATIOS = ['natural', 'square'];
+export const RATIO_DEFAULT = 'natural';
+export const SIZES = ['CUSTOM', 'XS', 'S', 'M', 'L', 'XL'];
+export const SIZE_DEFAULT = 'CUSTOM';

package/_style/clip-flag.style.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`:host([size=XS]){--clip-flag--width: 1.375rem}:host([size=S]){--clip-flag--width: 2rem}:host([size=M]){--clip-flag--width: 3.5rem}:host([size=L]){--clip-flag--width: 5rem}:host([size=XL]){--clip-flag--width: 8rem}:host([ratio=square]){--clip-flag--ratio: 1 / 1}:host{color-scheme:inherit;display:inline-block;aspect-ratio:var(--clip-flag--ratio, 4/3);width:var(--clip-flag--width, 100%)}.flag,.flag__svg{display:block;width:inherit;height:100%}.flag__svg{position:relative;overflow:hidden}svg,.flag__placeholder{display:block;min-height:100%;position:absolute;height:100%;left:50%;top:50%;transform:translate(-50%, -50%)}.flag__placeholder{display:flex;align-items:center;justify-content:center;width:100%;background:light-dark(oklch(92.2% 0 0deg), oklch(37.1% 0 0deg));color:light-dark(oklch(44.4% 0.177 26.899deg), oklch(88.5% 0.062 18.334deg));font-weight:500;text-align:center}`;

package/clip-flag.js

@@ -1,15 +1,18 @@
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { flags } from './_lib/list-flags.js';
-import styleComponent from './_lib/_clip-flag.style.js';
+import styleComponent from './_style/clip-flag.style.js';
+import { RATIO_DEFAULT, SIZE_DEFAULT } from './_lib/constants.js';
 
 const LIST_FLAGS = { ...flags, en: flags.gb };
 
 class ComponentClipFlag extends LitElement {
   static get properties() {
     return {
-      code: { type: String }, // public attr
-      _svgContent: { state: true } // internal state
+      code: { type: String },
+      size: { type: String, reflect: true },
+      ratio: { type: String, reflect: true },
+      _svgContent: { state: true }
     };
   }
 
@@ -18,6 +21,8 @@ class ComponentClipFlag extends LitElement {
   constructor() {
     super();
     this.code = '';
+    this.size = SIZE_DEFAULT;
+    this.ratio = RATIO_DEFAULT;
     this._svgContent = '';
   }
 
@@ -29,7 +34,6 @@ class ComponentClipFlag extends LitElement {
 
   _fetchFlag(code) {
     const safeCode = code.toLowerCase().trim();
-
     if (LIST_FLAGS[safeCode]) {
       this._svgContent = LIST_FLAGS[safeCode];
     } else {
@@ -41,9 +45,9 @@ class ComponentClipFlag extends LitElement {
   render() {
     return html`
       <span class="flag" aria-hidden="true">
-        ${this._svgContent
-          ? html`<span class="flag__svg">${this._svgContent}</span>`
-          : html`<span class="flag__placeholder">?</span>`}
+        <span class="flag__svg">
+          ${this._svgContent || html`<span class="flag__placeholder">?</span>`}
+        </span>
       </span>
     `;
   }
@@ -56,14 +60,16 @@ if (!customElements.get('outbook-clip-flag')) {
 /**
  * Wrapper function
  *
- * @param {{code: *, extraClasses: string}} props
+ * @param {{code: *, extraClasses: string, ratio: string}} props
  * @param {string} [props.extraClasses] - Classes to add to the host element
  */
 export function ClipFlag(props) {
-  const { code, extraClasses } = props;
+  const { code, ratio = 'natural', size = SIZE_DEFAULT, extraClasses } = props;
 
   return html`<outbook-clip-flag
     code="${code}"
+    ratio="${ratio}"
+    size="${size}"
     class="${ifDefined(extraClasses || undefined)}"
   ></outbook-clip-flag>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-clip-flag",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "clip-flag.js",
   "type": "module",
   "private": false,

package/_lib/_clip-flag.style.js

@@ -1,4 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`:host{color-scheme:inherit;display:inline-block;aspect-ratio:4/3;width:2rem;overflow:hidden}.flag__svg,svg{width:100%;height:100%;display:block}.flag__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:light-dark(oklch(92.2% 0 0deg), oklch(37.1% 0 0deg));color:light-dark(oklch(44.4% 0.177 26.899deg), oklch(88.5% 0.062 18.334deg));font-weight:bold}`;