open-index/open-npm huggingface dataset:
npm package: @imadkurdi/hamburger-menu
Description: This is a hamburger-menu component. A standard custom web component written in pure vanilla JS. So it could be used in any framework.
Author: Imad Kurdi
Latest version: 1.0.1

# hamburger-menu component
![Example demonstrating the use of the hamburger-menu component](./hamburger-menu.gif)

This is a hamburger-menu component. A standard custom web component written in pure vanilla JS, so it could be used in any framework.

> With the package you will find a complete functional example (**example.html, example.css, example.js**)<br>
> Please note that, as a developer, you do not need to take any action to control the menu itself, it works automatically as expected.

## Usage:
Use it like any standard tag:
- In html: `<hamburger-menu></hamburger-menu>`
- In JS: `document.createElement("hamburger-menu")`

## Attributes:
- `close-face`: if present `<hamburger-menu close-face></hamburger-menu>`, the menu shows 2 crossing bars instead of 3 parallel bars.

## Styling:
1. Define in an element's selector block one or more of the following custom properties:
   - `--dim`: menu dimensions in pixels. Default is 32px.
   - `--bg-color`: menu's background-color. Default is #ddd.
   - `--bars-color`: color of the menu's bars. Default is #555.
   - `--border-color`: color of the menu's borders and its box-shadow. Default is #c1c1c1.
   - `--border-radius`: radius of the menu's borders. Default is 0.25em.
   - `--transition-time`: when clicked, the menu transitions between open and close states. This custom property defines the transition time. Default is 200ms.
   ```css
   hamburger-menu { 
      --dim: 48px;
      --bars-color: blue;
   }
   ```

2. Or you can reach the following parts of the component:
   - `::part(menu)`: the menu is actually a `div` element, so style it as you style any `div` element.
   - `::part(bar)`: the bars inside the menu. Bars are actually `div`s elements, so style them as you style any `div` element.
   ```css
   ::part(menu) { background-color: lightgray; border-radius: 10px; }
   ```

## Events:
- `hamburger-menu-clicked`: This event enables developers to take actions when a user clicks the menu. To learn about the menu's state after the user clicks it, you should read `event.detail` which is a boolean value. If true that means the menu (after being clicked) has `close-face` attribute (which means it shows 2 crossed bars). Otherwise that means the menu has not `close-face` attribute and it shows 3 parallel bars.
   ```js
   document.querySelector("hamburger-menu")
      .addEventListener("hamburger-menu-clicked", e => { console.log(e.detail); });
   ```
npm package: @imadkurdi/info-icon
Description: This is an info-icon component. A standard custom web component written in pure vanilla JS, so it could be used in any framework.
Author: Imad Kurdi
Latest version: 1.0.0

# info-icon component
![Example demonstrating the use of the info-icon component](./info-icon.jpg)

This is an info-icon component. A standard custom web component written in pure vanilla JS, so it could be used in any framework.

> With the package you will find a complete functional example (**example.html**)<br>

## Usage:
Use it like any standard tag:
- In html: `<info-icon color="blue" bg-color="blue"></info-icon>`
- In JS: `document.createElement("info-icon")`

## Attributes:
- `bg-color`: ex `<info-icon bg-color="blue"></info-icon>`, this attribute determines the `color` of an `inset` `box-shadow`: `box-shadow: bg-color 0 0 0.5em inset;`.

- `color`: ex `<info-icon color="blue"></info-icon>`, this attribute determines the `color` of an letter `i` shown inside the element.

## Properties:
- `bgColor`: ex `elem.bgColor = "red"`, this is the property that is associated with the attribute `bg-color`.

- `color`: ex `elem.color = "green"`, this is the property that is associated with the attribute `color`.


## Styling:
1. Use the attributes `bg-color` and `color`:
   ```html
   <p><info-icon color="blue" bg-color="blue"></info-icon> This "info-icon" is styled using bg-color and color attributes.</p>
   ```

2. Or use the properties `bgColor` and `color` in JavaScript:
   ```js
      const elem = document.querySelector("info-icon");
      elem.bgColor = "#777";
      elem.color = "blueviolet";
   ```
3. Or use the defined `part` on the component: the component is just a standard `<span part="container">i</span>:`
   ```css
   info-icon::part(container) {
      background-color: aquamarine;
      color: brown;
      border: none;
   }
   ```
npm package: @imadkurdi/stars-rating
Description: This is a 5 star rating component. A standard custom web component written in pure vanilla JS. So it could be used in any framework.
Author: Imad Kurdi
Latest version: 1.0.2

# stars-rating component
This is a 5-stars rating component. A standard custom web component written in pure vanilla JS. So it could be used in any framework.

![Example demonstrating the use of the stars-rating component](./example.gif)

## Usage:
This component could be used to show current average rating value and the count of ratings. Developers could make the component ready to rating or could wait for users to click a button to start rating process. Users then choose the rating they want and click a button to send that rate. The component then raises an event to inform developers that a rating is sent. After that the component is no more active, meaning that users could not rate any more.

Use the component like any other tag:
1. In html: `<stars-rating id="rater_1" rating="2.6" count="1520"></stars-rating>`
2. In JS: `document.createElement("stars-rating")` or `new StarsRating()`

- To change the words in tooltip for stars alter this static array of the component class:
  `StarsRating.ratingLabels = ["Terrible", "Poor", "Fair", "Good", "Great"];`

- To change the words of the button alter this static array of the component class: `StarsRating.ratingBtnLabels = ["Rate", "Send"];`

## Attributes:
- rating attribute: `<stars-rating rating="2.6" ></stars-rating>`
- count  attribute: `<stars-rating count="1520"></stars-rating>`

## Styling:
1. Define in an element's selector blok one or more of the following custom properties:

- `--rating-text-font`: component font
- `--rating-stars-font`: stars font
- `--rating-stars-color`: stars color
- `--rating-btn-color`: button color
- `--rating-btn-bg-color`: button background color
- `--rating-btn-shadow`: button box-shadow
- `--rating-tip-color`: tip background color
- `--rating-tip-width`: tip box width
- `--rating-tip-border`: tip border
- `--rating-tip-shadow`: tip box-shadow

Note: the "line-height" of the stars font control the spaces above & below them (0.8 is recommended)

or

2. You can reach the following parts of the component:

- `::part(stars)`: the stars themseves (styles will be applied on each star)
- `::part(rateBtn)`: the rate button
- `::part(rating)`: the rating number
- `::part(count)`: the counting number
- `::part(tip)`: the div that contains the whole tip
- `::part(tip-text)`: the p tag (paragraph) that contains the text of the tip

  ex: `#rater_1::part(count) { color: red; }` to make the count number red

## Events:
- `rating`: The component defines this event to return the evaluation in event's property `event.detail`.

  ex: `document.body.addEventListener("rating", e => { console.log(e.detail); });`
npm package: @imadkurdi/toast-msg
Description: This is a toast-msg component: developers could create several toast messages. They will appear stacked on top of each other, and they will disappear automatically after a certain amount of time. It is a standard custom web component written in pure vanil
Author: Imad Kurdi
Latest version: 1.0.0

# toast-msg component
![Example demonstrating the use of the toast-msg component](./example.gif)

This is a toast-msg component: developers could create several toast messages. They will appear stacked on top of each other, and they will disappear automatically after a certain amount of time. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.

> With the package you will find a complete functional **example.html**<br>

## Usage:
Import the class of this component `ToastMsg`, then use its constructor to create a toast message:<br>
`const toast = new ToastMsg(content, msgTime, rtl);`
where:
- `content`: represents the content of the toast message.
   - could be a `boolean` type: if `true` => ![OK toast](./ok.jpg), if `false` => ![NO toast](./no.jpg)
   - could be `undefined` (you do not pass anything): the same as if you pass `boolean true`
   - could be a `string`: you pass the message that you want to show.
- `msgTime`: the toast message, when appended to the document, will slid-in in 500 ms, will be shown for `msgTime` in ms (no-motion time), finally will slide-out in 500 ms:
   - could be a number to represent the no-motion time in ms.
   - could be `undefined`: in this case the no-motion time depends on the content of the message, and will be calculated according to this formula: `min(5000, max(500, 60 * content.length))` which means that the no-motion time will be proportional to the length of the message, but should never be outside the range [500, 5000] ms.
- `rtl`: Right-to-Left or Left-to-Right.
   - could be a `string`: `rtl` => the component will behave in a way compatible with Right-to-Left hand writing systems; it will slide-in from the right-hand side of the screen. For any other string value, the component will behave in a way compatible with Left-to-Right hand writing systems: it will slide-in from the left-hand side of the screen.
   - could be a `boolean` type: if `true` => as if passed the string `rtl`, if `false` => as if passed the string `ltr`.
   - could be `undefined` (you do not pass anything): the same as if you pass `boolean false`
   ```js
   import ToastMsg from "./toast-msg.js";

   document.body.appendChild(new ToastMsg());
   document.body.appendChild(new ToastMsg(false));
   document.body.appendChild(new ToastMsg(true, 1000));
   document.body.appendChild(new ToastMsg("any message"));
   document.body.appendChild(new ToastMsg("this message will appear from the right-hand side of the screen", "", "rtl"));
   ```

## Styling:
The component is simply a standard `div` element and you can reach it through `::part(container)`
   ```css
   ::part(container) { background-color: lightgray; }
   ```
npm package: @imadkurdi/toggle-switch
Description: This is a toggle-switch component: a switch having ON & OFF states. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.
Author: Imad Kurdi
Latest version: 1.0.0

# toggle-switch component
![Example demonstrating the use of the toggle-switch component](./example.gif)

This is a toggle-switch component: a switch having ON & OFF states. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.

> With the package you will find a complete functional **example.html**<br>
> Note that, as a developer, you need not to take any action to control the switch itself, it works automatically as expected.

## Usage:
Use it like any standard tag:
- In html: `<toggle-switch></toggle-switch>`
- In JS: `document.createElement("toggle-switch")`

## Attributes:
- `disabled`: if present `<toggle-switch disabled></toggle-switch>`, the switch will be disabled: meaning it will not respond to user actions. Please note that a disabled switch could be in ON or OFF state.

## Properties:
- `state`: it is a boolean property of a JS object representing a `toggle-switch` tag. This property does not have a corresponding attribute. It is a read/write property. `true` value indicates the ON state of the switch, and `false` value indicates the OFF state of the switch.

## Events:
- `toggle-switch-changed`: This event enables developers to take actions when a user changes the state of the switch. To learn about the switch's new state after the user changed it, you should read `event.detail` or the switch's `state` property. It's value indicates the final state of the switch.
   ```js
   document.querySelector("toggle-switch")
      .addEventListener("toggle-switch-clicked", e => { console.log(e.detail); });
   ```

## Styling:
1. Define in an element's selector block one or more of the following custom properties:
   - `--block-size`: this controls the block-size (height) of the component (not including the borders). Default is 14px. Note that the inline-size is calculated internally from the block-size as `inline-size = 2 * block-size`.
   - `--bg-off-color`: switch's background-color when in the OFF state. Default is `white`.
   - `--bg-on-color`: switch's background-color when in the ON state. Default is `blue`.
   - `--slider-off-color`: slider's color when in the OFF state. Default is `black`.
   - `--slider-on-color`: slider's color when in the ON state. Default is `white`.
   - `--border-color`: switch's border color. Default is `#ccc`.
   ```css
   toggle-switch { 
      --block-size: 30px;
      --bg-off-color: lightgrey;
   }
   ```

2. Or you can reach the following parts of the component:
   - `::part(container)`: the container is actually a `div` element, so style it as you style any `div` element.
   - `::part(slider)`: the slider inside the container. It is actually a `div` element, so style it as you style any `div` element.
   ```css
   ::part(slider) { background-color: lightgray; }
   ```
npm package: @imadkurdi/wait-loading
Description: This is a spin-like component. You could use it to indicate that something is going on and the user should wait for it. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.
Author: Imad Kurdi
Latest version: 1.0.0

# wait-loading component
![Example demonstrating the use of the wait-loading component](./example.gif)

This is a spin-like component. You could use it to indicate that something is going on and the user should wait for it. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.

> With the package you will find a complete functional example (**example.html, example.css, example.js**)

## Usage:
Use it like any standard tag:
- In html: `<wait-loading></wait-loading>`
- In JS: `document.createElement("wait-loading")`

If you add `<wait-loading></wait-loading>` to the html document then you should control its `visibility` or its `display` properties to control when it is shown to or hidden from the user. The alternative usage is to create the element in JS and append it when and where you want. When you want to hide it just remove it from the document (see the example).

## Styling:
1. Define in an element's selector block one or more of the following custom properties:
   - `--dot-size`: dot is actually a `div` element. This property controls the dimensions of the dots. Default is `0.25em`.
   - `--dot-color`: dot is actually a `div` element. This property controls the color of the dots. Default is `#dc3545`.

2. Or you can reach all dots by:
   - `::part(dot)`: dot is actually a `div` element. So you can style it in the way you like.

> Note: you could create this component by calling its constructor: `new WaitLoading(period)`. As you see you could pass the parameter `period` which should be a number that indicates the period (complete cycle) of animation. This parameter indicates the period time in ms (milli-seconds). The default value is 900ms.<br>
> Note that to be able to create the component by calling its constructor `new WaitLoading(period)` you should have a modular JS and you should import the component's class `WaitLoading`.