<commit_before># Alert

## What is this

**Purpose**: Users need to be aware of important information related to their current activity (contextual alerts) or related to the system (system notifications).

**Description**: An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Alerts are available for any length of text, as well as an optional dismiss button. Alerts can also contain additional HTML elements like headings and paragraphs.

## Usage

In order to use the alert custom element you need to import the element in the document's head:

```html
<link href="tk-alert.min.css" rel="stylesheet">
<script src="tk-alert.min.js"></script>
```

The simplified version of the custom elements
```html
<tk-alert>No params passed</tk-alert>

<tk-alert dismiss="true" type="primary">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</tk-alert>

<tk-alert type="success" acknowledge="true">
    <strong>Well done!</strong> You successfully read this important alert message.
</tk-alert>

<tk-alert type="warning" dismiss="true" auto-dismiss="15000">
    <strong>Warning!</strong> This one will self distruct in 15 seconds.
</tk-alert>

<tk-alert type="danger" href="https://www.google.com">
    <strong>Oh snap!</strong> Click open to go to google.com
</tk-alert>
```

### Alerts demo:
<tk-alert>No params passed</tk-alert>
<tk-alert type="primary" dismiss="true">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</tk-alert>
<tk-alert type="success" acknowledge="true">
    <strong>Well done!</strong> You successfully read this important alert message.
</tk-alert>
<tk-alert type="warning" dismiss="true" auto-dismiss="15000">
    <strong>Warning!</strong> This one will self distruct in <strong><span id="countdown">15</span></strong> seconds.
</tk-alert>
<tk-alert type="danger" href="https://www.google.com">
    <strong>Oh snap!</strong> Click open to go to google.com
</tk-alert>
<p>
<button role="button" id="insertNewFloated" class="btn btn-success">Create a floated alert</button>
</p>

## Attibutes
Control the design and functionality of the custom element through attributes.


|Attribute		|Description|
|---------------|-----------------------------------------------------------------------------------------------|
|type			|This attribute is responsible for the looks.|
|dismiss		|Appends the x button. True is the only value.|
|acknowledge	|Appends a generic button with a title `Ok`. True is the only value.|
|auto-dismiss	|Controls the auto close functionality of the alert. Values (integers) represent milliseconds|
|href			|if is set a redirect button is created. Value must be an actual url|
|position		|Adjust the alerts's position to different corners. Possible values: `top-left`, `top-center` and `top-right`|


## Dismissing
No need for extra javascript, it's possible to dismiss any alert inline. Here’s how:

Add a `dismiss` or an `acknowledge` attribute.
That's it!
Now clicking the x button will close the alert!

## JavaScript behavior
### Triggers

Enable dismissal of an alert via JavaScript:
```js
el.close()
```

Change the alert type:
```js
el.setAttribute('type', 'warning')
```

Remove or add the close button:
```js
el.removeAttribute('dismiss'); // Will remove the attribute
el.setAttribute('acknowledge', true);
el.setAttribute('url', 'https://www.google.com');
el.setAttribute('auto-dismiss', '5000');
```

## Events
The custom element exposes a few events for hooking into alert functionality.


|Event			|Description								     			|
|-----------------------|-----------------------------------------------------------------------------------------------|
|tk.alert.show		|This event fires immediately when the element is appended in the DOM.				|
|tk.alert.close		|This event fires immediately when the close instance method is called.				|
|tk.alert.closed	|This event is fired when the alert has been closed (will wait for CSS transitions to complete).|
|tk.alert.buttonClicked	|This event is fired when the alert button has been clicked.|


Example:
Add some functonality when the alert is closing (right before the css transition start):
```js
el.addEventListener('tk.alert.close', function() {
  alert('Impressed!')
})
```

Add some functonality when the alert is closed (right after the css transition ends):
```js
el.addEventListener('tk.alert.closed', function() {
  alert('Very impressive!')
})
```


## Programmatically add a new alert:
Use the following script:


```js
var el = document.createElement('tk-alert');
el.setAttribute('type', 'success');
el.setAttribute('dismiss', true);
el.innerHTML = 'Wow it works!';

document.body.appendChild(el);
```


### Demo

<div id="insert-new-alert"></div>

Run the above command by clicking this button:
<p>
<button role="button" id="insertNew" class="btn btn-success">Create An Alert</button>
</p>

### Programmatically change an alert or add remove the close button:
Use the following script:


```js
var el = document.querySelector('tk-alert');
el.setAttribute('type', 'success');
el.setAttribute('dismiss', '');
```


### Live example
<tk-alert id="change-me" type="info" dismiss="true"><strong>Alert:</strong> text goes here</tk-alert>

<div id="replaceble" markdown="0">
<button role="button" data-opt1="type" value="info">Make it info</button>
<button role="button" data-opt1="type" value="success">Make it success</button>
<button role="button" data-opt1="type" value="warning">Make it warning</button>
<button role="button" data-opt1="type" value="danger">Make it danger</button>
<button role="button" data-opt1="dismiss" value="true">Add close button</button>
<button role="button" data-opt1="dismiss" value="false">Remove close button</button>
</div>


### Programmatically close an alert:
Use the following script:


```js
var el = document.querySelector('tk-alert');
el.close();
```


### Demo
<tk-alert id="close-me-with-a-btn" type="danger" acknowledge="true">
<strong>Alert:</strong> Close me with javascript
</tk-alert>
<p>
<button role="button" id="i-will-close-that-alert">Close the above alert</button>
</p>


## Utilities<commit_msg>add button to convert to primary<commit_after># Alert

## What is this

**Purpose**: Users need to be aware of important information related to their current activity (contextual alerts) or related to the system (system notifications).

**Description**: An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Alerts are available for any length of text, as well as an optional dismiss button. Alerts can also contain additional HTML elements like headings and paragraphs.

## Usage

In order to use the alert custom element you need to import the element in the document's head:

```html
<link href="tk-alert.min.css" rel="stylesheet">
<script src="tk-alert.min.js"></script>
```

The simplified version of the custom elements
```html
<tk-alert>No params passed</tk-alert>

<tk-alert dismiss="true" type="primary">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</tk-alert>

<tk-alert type="success" acknowledge="true">
    <strong>Well done!</strong> You successfully read this important alert message.
</tk-alert>

<tk-alert type="warning" dismiss="true" auto-dismiss="15000">
    <strong>Warning!</strong> This one will self distruct in 15 seconds.
</tk-alert>

<tk-alert type="danger" href="https://www.google.com">
    <strong>Oh snap!</strong> Click open to go to google.com
</tk-alert>
```

### Alerts demo:
<tk-alert>No params passed</tk-alert>
<tk-alert type="primary" dismiss="true">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</tk-alert>
<tk-alert type="success" acknowledge="true">
    <strong>Well done!</strong> You successfully read this important alert message.
</tk-alert>
<tk-alert type="warning" dismiss="true" auto-dismiss="15000">
    <strong>Warning!</strong> This one will self distruct in <strong><span id="countdown">15</span></strong> seconds.
</tk-alert>
<tk-alert type="danger" href="https://www.google.com">
    <strong>Oh snap!</strong> Click open to go to google.com
</tk-alert>
<p>
<button role="button" id="insertNewFloated" class="btn btn-success">Create a floated alert</button>
</p>

## Attibutes
Control the design and functionality of the custom element through attributes.


|Attribute		|Description|
|---------------|-----------------------------------------------------------------------------------------------|
|type			|This attribute is responsible for the looks.|
|dismiss		|Appends the x button. True is the only value.|
|acknowledge	|Appends a generic button with a title `Ok`. True is the only value.|
|auto-dismiss	|Controls the auto close functionality of the alert. Values (integers) represent milliseconds|
|href			|if is set a redirect button is created. Value must be an actual url|
|position		|Adjust the alerts's position to different corners. Possible values: `top-left`, `top-center` and `top-right`|


## Dismissing
No need for extra javascript, it's possible to dismiss any alert inline. Here’s how:

Add a `dismiss` or an `acknowledge` attribute.
That's it!
Now clicking the x button will close the alert!

## JavaScript behavior
### Triggers

Enable dismissal of an alert via JavaScript:
```js
el.close()
```

Change the alert type:
```js
el.setAttribute('type', 'warning')
```

Remove or add the close button:
```js
el.removeAttribute('dismiss'); // Will remove the attribute
el.setAttribute('acknowledge', true);
el.setAttribute('url', 'https://www.google.com');
el.setAttribute('auto-dismiss', '5000');
```

## Events
The custom element exposes a few events for hooking into alert functionality.


|Event			|Description								     			|
|-----------------------|-----------------------------------------------------------------------------------------------|
|tk.alert.show		|This event fires immediately when the element is appended in the DOM.				|
|tk.alert.close		|This event fires immediately when the close instance method is called.				|
|tk.alert.closed	|This event is fired when the alert has been closed (will wait for CSS transitions to complete).|
|tk.alert.buttonClicked	|This event is fired when the alert button has been clicked.|


Example:
Add some functonality when the alert is closing (right before the css transition start):
```js
el.addEventListener('tk.alert.close', function() {
  alert('Impressed!')
})
```

Add some functonality when the alert is closed (right after the css transition ends):
```js
el.addEventListener('tk.alert.closed', function() {
  alert('Very impressive!')
})
```


## Programmatically add a new alert:
Use the following script:


```js
var el = document.createElement('tk-alert');
el.setAttribute('type', 'success');
el.setAttribute('dismiss', true);
el.innerHTML = 'Wow it works!';

document.body.appendChild(el);
```


### Demo

<div id="insert-new-alert"></div>

Run the above command by clicking this button:
<p>
<button role="button" id="insertNew" class="btn btn-success">Create An Alert</button>
</p>

### Programmatically change an alert or add remove the close button:
Use the following script:


```js
var el = document.querySelector('tk-alert');
el.setAttribute('type', 'success');
el.setAttribute('dismiss', '');
```


### Live example
<tk-alert id="change-me" type="info" dismiss="true"><strong>Alert:</strong> text goes here</tk-alert>

<div id="replaceble" markdown="0">
<button role="button" data-opt1="type" value="info">Make it info</button>
<button role="button" data-opt1="type" value="primary">Make it primary</button>
<button role="button" data-opt1="type" value="success">Make it success</button>
<button role="button" data-opt1="type" value="warning">Make it warning</button>
<button role="button" data-opt1="type" value="danger">Make it danger</button>
<button role="button" data-opt1="dismiss" value="true">Add close button</button>
<button role="button" data-opt1="dismiss" value="false">Remove close button</button>
</div>


### Programmatically close an alert:
Use the following script:


```js
var el = document.querySelector('tk-alert');
el.close();
```


### Demo
<tk-alert id="close-me-with-a-btn" type="danger" acknowledge="true">
<strong>Alert:</strong> Close me with javascript
</tk-alert>
<p>
<button role="button" id="i-will-close-that-alert">Close the above alert</button>
</p>


## Utilities
{'fraction_non_alphanumeric': 0.17222178028796437, 'fraction_numerical': 0.004056956487152971, 'mean_word_length': 4.165160230073952, 'pattern_counts': {'":': 0, '<': 163, '<?xml version=': 0, '>': 163, 'https://': 6, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6221364', 'n_tokens_mistral': 3734, 'n_tokens_neox': 3515, 'n_words': 1314}