@outbook/webcomponents-clip-flag 1.0.0 → 1.0.2

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/_lib/list-flags.js

@@ -1,5 +1,10 @@
 import { svg } from 'lit';
 
+const vn = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333">
+  <path fill="#d80027" d="M196.641 85.337H0v341.326h512V85.337z"/>
+  <path fill="#ffda44" d="m256 157.279 22.663 69.747H352l-59.332 43.106 22.664 69.749L256 296.774l-59.332 43.107 22.664-69.749L160 227.026h73.337z"/>
+</svg>`;
+
 export const flags = {
   es: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 15">
   <path fill="#d03433" d="M0 0h22.5v4H0zm0 11h22.5v4H0z"/>
@@ -16,8 +21,6 @@ export const flags = {
     <path d="M311.7 230 513 341.3v-31.5L369.3 230zm-168 0L0 309.9v31.5L200.3 230zm56.6-118.7L0 0v31.5l143.7 79.8zm168 0L513 31.5V0L311.7 111.3z"/>
   </g>
 </svg>`,
-  vn: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333">
-  <path fill="#d80027" d="M196.641 85.337H0v341.326h512V85.337z"/>
-  <path fill="#ffda44" d="m256 157.279 22.663 69.747H352l-59.332 43.106 22.664 69.749L256 296.774l-59.332 43.107 22.664-69.749L160 227.026h73.337z"/>
-</svg>`
-};
+  vi: vn,
+  vn
+};

package/_style/clip-flag.style.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`:host([size=XS]){--_width: 1.375rem}:host([size=S]){--_width: 2rem}:host([size=M]){--_width: 3.5rem}:host([size=L]){--_width: 5rem}:host([size=XL]){--_width: 8rem}:host([ratio=square]){--_ratio: 1 / 1}:host{color-scheme:inherit;display:inline-block;aspect-ratio:var(--_ratio, 4/3);width:var(--_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.2",
   "main": "clip-flag.js",
   "type": "module",
   "private": false,
@@ -22,7 +22,7 @@
   "description": "Web components clip-flag",
   "devDependencies": {
     "@outbook/colorful": ">=1.1.2",
-    "@outbook/design-decisions": ">=1.1.2"
+    "@outbook/design-decisions": ">=1.1.4"
   },
   "peerDependencies": {
     "sass": "^1.97.2",

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}`;